html+javascriptでアプリ開発をしています。
実現したいこと
設置したcanvas(画像読み込み済み)をクリック時、
クリックした座標に画像を重ねたい。
下記のように実装しているのですが、
点を書く処理は動作するのですが、
drawImageの部分が動作しません。
(xy座標、img.srcは正しく取得できています)
初歩的な質問で申し訳ございません。
よろしくお願いいたします。
this.canvas.addEventListener("click", (e) => { var rect = e.target.getBoundingClientRect() var x = e.clientX - rect.left var y = e.clientY - rect.top //ここの処理が動きません。 var img = new Image() img.onload = function() { //img.srcと、xy座標は正しく取得できています alert(img.src) alert(x,y) this.ctx.drawImage(img, x, y) }; img.src = "pin.png" //ここの処理(クリックした座標に点をかく)は動作します。 this.ctx.beginPath(); this.ctx.arc(x, y, 5, 0, Math.PI * 2, false); this.ctx.fill(); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/30 05:20