2
画像のグループ間にツリーの階層関係があります。画像を親ノードの画像よりも小さい子ノード画像を持つキャンバスタグの木構造として表現し、すべての画像をマウスオーバー時にある値で拡大する必要があります。html5キャンバスタグで画像の階層ツリー構造を作成していますか？
javascriptの関数setscaleとtranslateを使用すると、スケーリングの効果は問題ありませんが、画像が表示されているにもかかわらずマウスイベントリスナーの機能が正しく動作しないことがあります。私はデバッグに使用したアラートメッセージを取得しません。これはちょうどテストコードです： -
function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 20;
var destY = 20;
var destWidth = 200;
var destHeight = 137;
var sources = new Array();
sources[0]="darth-vader.jpg";
sources[1]="darth-vader.jpg";
var imageObj = new Image();
loadImages(sources, function(images){
context.drawImage(images[0], destX, destY, destWidth, destHeight);
images[0].onmouseover=function()
{
alert('1');
}
images[0].onmouseout=function()
{
alert('2');
}
context.drawImage(images[1], destX+200,destY, destWidth, destHeight);
images[1].onmouseover=function()
{
alert('3');
}
images[1].onmouseout=function()
{
alert('4');
}
});
};
キャンバスに画像のコピーを描画しています。 'onmouseover'属性は、表示されていないimage *要素*に対してのみ機能します。このようなことをするには、カーソルと画像の位置を検出する必要があります。 – pimvdb
by image要素は、htmlイメージタグを意味しますか？はいの場合は、キャンバスタグで作業することはできますか？ – ajish
はい、 'new Image'は基本的に画像タグを作成します。このタグをキャンバスに配置することはできません。ビジュアル表現はキャンバスにのみ描画できます。 'canvas.onmouseover'を使って、カーソルがある数学の画像にあるかどうかを判断する必要があります。 – pimvdb