我写了一些简单的代码来改变封面图像的不透明度，以显示其下面隐藏的图像。有两个 Canvas ，一个在另一个之上。两个都是 500x500。两个 Canvas 都有一个图像。这里我做了更改鼠标移动事件时封面图像的不透明度，以便隐藏图像可见。我使用 e.layerX/Y 来获取坐标。我可以使用 管理一个像素一个像素的不透明度操作，但不是用户友好
function change_opacity(e){
if(checked){
var imageData=ctx2.getImageData(e.layerX,e.layerY,10,10);
for(i=3;i<imageData.data.length;i+=4){
imageData.data[i]=0;
}
ctx2.putImageData(imageData,e.layerX,e.layerY);
}
}
我希望它在每次鼠标移动时改变某个圆形部分的不透明度。我该怎么做？
完整代码:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
#canvas1{
position:absolute;
top:51px;
left:200px;
border:1px solid black;
}
#canvas2{
position :absolute;
top:50px;
left:200px;
border:1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<script>
function makeit(){
var checked=false;
var canvas1=document.getElementById('canvas1');
var canvas2=document.getElementById('canvas2');
var ctx1=canvas1.getContext('2d');
var ctx2=canvas2.getContext('2d');
var img1=new Image();
img1.src="car1.jpg";
img1.onload=function (){
ctx1.drawImage(img1,0,0);
}
var img2=new Image();
img2.src="car2.jpg";
img2.onload=function (){
ctx2.drawImage(img2,0,0);
}
canvas2.addEventListener('mousedown',check,false);
canvas2.addEventListener('mousemove',change_opacity,false);
canvas2.addEventListener('mouseup',uncheck,false);
function check(){
checked=true;
}
function uncheck(e){
checked=false;
}
function change_opacity(e){
if(checked){
var imageData=ctx2.getImageData(e.layerX,e.layerY,10,10);
for(i=3;i<imageData.data.length;i+=4){
imageData.data[i]=0;
}
ctx2.putImageData(imageData,e.layerX,e.layerY);
}
}
}
window.onload=makeit;
</script>
</body>
</html>
最佳答案
您的直觉是正确的 - 使用 getImageData 和 putImageData 是性能 killer 。
您可以使用合成来“删除”顶部图像并“显示”底部图像:
演示:http://jsfiddle.net/m1erickson/sHC6x/
如果设置 context.globalCompositeOperation="destination-out"，则任何新绘图都将“删除”任何现有绘图。这意味着您可以删除顶部 Canvas 以显示底部 Canvas 上的图像。
此代码(在 mousemove 内)将允许您将鼠标用作顶部 Canvas 上的橡皮擦。
topContext.save();
topContext.globalCompositeOperation="destination-out";
topContext.beginPath();
topContext.moveTo(startX,startY);
topContext.lineTo(mouseX,mouseY);
topContext.stroke();
您可以像这样设置上下文笔划设置，以制作一个 10 像素宽的圆形橡皮擦。
topContext.lineWidth=10;
topContext.lineCap = "round";
关于javascript - 通过更改鼠标移动事件的封面图像不透明度来发现隐藏图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24085289/