gpt4 book ai didi

javascript - Canvas ,我的橡皮擦不起作用

转载 作者:行者123 更新时间:2023-11-28 02:14:52 25 4
gpt4 key购买 nike

我试图提供一个像刷子一样的橡皮擦,以独特地删除。我有一个黑色矩形和一张图片作为 Canvas 背景。如何删除矩形的部分内容?

"Erasing" in html5 canvas ,没有工作

我的 fiddle :http://jsfiddle.net/FgNQk/10/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;

ctx.fillRect(100,100,100,100);

canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX ;
this.Y = e.pageY ;
this.color = rgb();
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {

if(this.down) {
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
strokeStyle = "rgba(255,255,255,0.0)";
ctx.lineWidth=1;
stroke();
}
this.X = e.pageX ;
this.Y = e.pageY ;
}
}, 0);

最佳答案

链接中的解决方案确实有效。尝试:

  with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
globalCompositeOperation = "destination-out";
strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth=1;
stroke();
}

关于javascript - Canvas ,我的橡皮擦不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16525291/

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