gpt4 book ai didi

javascript - 拖放到 HTML5 Canvas

转载 作者:行者123 更新时间:2023-11-30 17:50:51 24 4
gpt4 key购买 nike

我正在拖动一个 html 元素并放到 Canvas 上,获取释放的位置并在 Canvas 上的相同位置绘制对象。但显示在不同的位置。看我的code .

脚本

function init() {
var canvas = document.getElementById("graphCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 2;
}

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data),
ev.clientX, ev.clientY);
}

HTML

<body onload="init();">
<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"></canvas>
<img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/>
</body>

最佳答案

已修复。更新代码为 http://jsfiddle.net/YXxsH/5/ .使用 pageXpageY 以及图像 offset 值进行计算。

关于javascript - 拖放到 HTML5 Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19087394/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com