HTML5での特定Canvasへのリンクについて

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/22 22:51:06
  • 終了:2013/07/29 22:55:04

回答(3件)

id:holoholobird No.1

holoholobird回答回数574ベストアンサー獲得回数1042013/07/23 01:02:06

ポイント167pt

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>
id:dawakaki No.2

だわかき回答回数797ベストアンサー獲得回数1222013/07/23 08:42:43

ポイント167pt

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

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

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

id:kaji0120 No.3

kaji0120回答回数59ベストアンサー獲得回数132013/07/23 17:41:23

ポイント166pt
		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に該当する場所かは常に評価することができそうなので、その部分を使えば目的を達成できると思います。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません