質問: 'images/map2.jpg'; $('#btn_ej01').hover( function() { // マスク ctx.beginPath(); ctx.moveTo(456,18); ctx.lineTo(444,254); ctx.lineTo(541,280); ctx.lineTo(553,18); ctx.clip(); // 画像の描画 ctx.drawImage(img, 0, 0); $('#map2').css('z-index','9999') }, function() { // 画像の描画 ctx.clearRect(0,0,canvas.width, canvas.height); $('#map2').css('z-index','-1') } ); $('#btn_ej02').hover( function() { // マスク ctx.beginPath(); ctx.moveTo(456,12); ctx.lineTo(456,72); ctx.lineTo(552,144); ctx.lineTo(552,12); ctx.clip(); ctx.drawImage(img, 0, 0); $('#map2').css('z-index','9999') },function() { ctx.clearRect(0,0,canvas.width, canvas.height); $('#map2').css('z-index','-1') } ); $('#btn_ej03').hover( function() { // マスク ctx.beginPath(); ctx.moveTo(456,72); ctx.lineTo(456,132); ctx.lineTo(504,204); ctx.lineTo(552,144); ctx.clip(); ctx.drawImage(img, 0, 0); $('#map2').css('z-index','9999') },function() { ctx.clearRect(0,0,canvas.width, canvas.height); $('#map2').css('z-index','-1') } ); }); ``` 下敷きとして置いたへボタンホバー時の日本地図を描画しctx.beginPath();で区域を限定してmap2を表示するまでは出来ていました。 ホバーを外した際に描画を消す方法が不適切なのではないかと考えております。 確認のためにに色を付けてみると、 最初は#btn_ej01~btn_ej03とも指定した形が描画されているのですが、 2回、3回とボタンを変えホバーを繰り返すと、指定した形に描画されなくなってしまいます。 どう変更したら繰り返し描画/クリアが可能になるでしょうか? drawImageに対し、clearRectの使用が正しいのか?など検索しております。 ctx.clearRect(456,18,444,254,541,280,553,18);等に変更すると、 その地域だけのmap2が表示が消えるのが確認できたので、 ctx.clearRect(0,0,canvas.width, canvas.height);はパスを消すための処理ではなくて、 画像を消すための処理なのかと次第にわかってきましたが(?) パスを消すための処理にたどり着けません。 詳しい方、お教えいただけますと幸いです。
回答: パスを消す方法はctx.save()/ctx.restore()です。 いったんクリップ設定する前の状態をctx.save()で保持しておき、前回のクリップが必要なくなればctx.restore()でクリアします。 サンプル