Question

我有这段代码

<canvas id="Con1" width="500" height="500"></canvas>

<script type="text/javascript">

var Rxt = document.getElementById('Con1').getContext('2d');
Rxt.fillStyle = 'green';
Rxt.fillRect(0, 0, 2000, 2000);
Rxt.rotate(.2);

var Img = document.createElement('img');
Img.src = 'images/009-Invoice1-A4-SET-PAD.png';
Img.onload = function () {
    Rxt.drawImage(Img, 50, 0, 200, 200); 
}

var down = false;

Rxt.canvas.addEventListener('mousedown', function () {
    down = true;
}, false);

Rxt.canvas.addEventListener('mouseup', function () {
    down = false;
}, false);

Rxt.canvas.addEventListener('mousemove', function (event) {
    if (down) {
         Rxt.translate(0, -50);

         Rxt.drawImage(Img, event.clientX - this.offsetLeft,

         event.clientY - this.offsetTop, 100, 100);

         Rxt.translate(0, 50);

    }
}, false);

</script>

我试过这个，我在画布上添加一个图像并拖动它。它工作但图像连续拖动，它打印重复的图像，但输出应该是平滑的。我还想为该图像添加标签并使其可移动。

Answer 1

每次想要绘制内容并重绘所有内容时，都需要清除画布。我还建议您查看画布上下文.restore()和.save()，因为它们在处理画布转换时非常有用

至于标签，您可能需要使用fillText或stokeText方法

看看这是否有帮助 http://pastebin.com/kuaTbuhW

如何使用JavaScript Canvas api拖动图像并为其添加标签？

1 个答案: