人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML5での特定Canvasへのリンクについて
HTML5のCanvasにて画像を2枚重ねて削って遊べるスクラッチカード的なものを作成してます。
削り終わった後に画像の一部にリンクを貼りたいと思っているのですがCanvasにリンクを貼るにはmousedownイベントで座標を取得しlocation.hrefでリンクさせることはできたのですが、レイヤー上になっている画像ではリンクをさせず、削り終わって表示されるCanvasへのみリンクを有効にするにはどのような方法がありますでしょうか。

●質問者: chuff
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● holoholobird
●167ポイント

http://wscratchpad.websanova.com/
jqueryのwScratchPadであれば、任意の画像にスクラッチ機能を付けることができます。

https://github.com/websanova/wScratchPad#wscratchpadjs
画像を自由に設定することもできますし、重ねる画像を指定することもできます。

$('#elem').wScratchPad({
 width : 210, // set width - best to match image width
 height : 100, // set height - best to match image height
 image : 'images/slide1.jpg', // set image path
 image2 : null, // set overlay image path - if set color is not used
 color : '#336699', // set scratch color - if image2 is not set uses color
 overlay : 'none', // set the type of overlay effect 'none', 'lighter' - only used with color
 size : 10, // set size of scratcher
 realtimePercent : false, // Update scratch percent only on the mouseup/touchend (for better performances on mobile device)
 scratchDown : null, // scratchDown callback
 scratchUp : null, // scratchUp callback
 scratchMove : null, // scratcMove callback
 cursor : null // Set path to custom cursor
});

http://wscratchpad.websanova.com/
また、たとえば全体の70%が削られたなら指定アドレスにリンクする、などのイベントを起こすことも可能です。(リンク先の3番目のdemoを参照)

 <script type="text/javascript">
 $("#wScratchPad3").wScratchPad({
 cursor:'./cursors/mario.png',
 scratchMove: function(e, percent)
 {
 if(percent > 70)
 this.clear();
 },
 });
 </script>

2 ● だわかき
●167ポイント

Canvasの一部分だけにリンクを貼りたい場合は、onClickでどこにクリックしたかを確認し、リンクさせたい部分の内部であればページをジャンプする等の制御が必要です。

HTMLのリンク(クリッカブルマップ、イメージマップ)では「マウスカーソルがどこにあるか、画像のどこをクリックしたか」)という判断を、ブラウザが全部やってくれますが、Canvasではすべて自分で行わなければなりません。

HTML5 canvas とマウス座標の制御
http://1ka2ka.com/archives/201006/09_203630.html


3 ● kaji0120
●166ポイント
scratchFunc: function(e, $this, event)
{
e.pageX = Math.floor(e.pageX - $this.canvas_offset.left);
e.pageY = Math.floor(e.pageY - $this.canvas_offset.top);

$this['scratch' + event](e, $this);

if($this.settings['scratch' + event]) $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]);
},

scratchPercentage: function($this)
{
var hits = 0;
var imageData = $this.ctx.getImageData(0,0,$this.canvas.width,$this.canvas.height)

for(var i=0, ii=imageData.data.length; i<ii; i=i+4)
{
if(imageData.data[i] == 0 && imageData.data[i+1] == 0 && imageData.data[i+2] == 0 && imageData.data[i+3] == 0) hits++;
}

return (hits / $this.pixels) * 100;
},

回答1のjs
http://wscratchpad.websanova.com/wScratchPad.js
の中には、削ったところとそうでないところを識別する関数があります。

クリックした場所がscratchPercentage: function($this)のhitに該当する場所かは常に評価することができそうなので、その部分を使えば目的を達成できると思います。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ