<canvas>
現在、HTML5とJavaScriptのタグに2つの円があります。
今、私はマウスオーバーとクリックに基づいて変化する画像を追加しようとしています(完了)。
これは基本的に、ユーザーがボタンの上にマウスを置くと色が追加で変更される再生/一時停止ボタンの実装です。
イベントはオブジェクトではないため、HTML5の図形でイベントがどのように機能するかを理解できないようです...現時点での私のコードは次のとおりです。
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
//Outer circle
context.beginPath();
context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
context.fillStyle = "#000";
context.fill();
context.stroke();
//Inner cicle
context.beginPath();
context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
context.fillStyle = "#fff";
context.fill();
context.stroke();
//Play / Pause button
var imagePlay = new Image();
var imageHeight = 48/2;
imagePlay.onload = function() {
context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
};
imagePlay.src = "images/play.gif";
}
で作成された図形のイベントを処理する方法は
<canvas>
?<canvas>
別の画像と交換するときに画像をクリーンアップ/削除するにはどうすればよいですか?