[英]Canvas, my eraser does not work
我試圖提供一種橡皮擦,就好像它是刷子一樣,以進行獨特的擦除。 我有一個黑色的rect和一張圖片作為畫布背景。 如何擦除直腸的一部分?
我的小提琴: 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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.