我写了一些简单的代码来改变封面图像的不透明度,以显示它下面的隐藏图像。另外两个画布一个。两个都是500x500。画布上有一个图像。这是我改变了鼠标移动事件中封面图像的不透明度,以便隐藏图像可见。我使用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);
}
}
我想让它为每个mousemove上的某个圆形部分进行不透明度更改。我可以这样做吗?
完整代码:
<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>
答案 0 :(得分:1)
你的直觉是正确的 - 使用getImageData&amp; putImageData是一个性能杀手。
您可以使用合成来“擦除”顶部图像并“显示”底部图像:
演示:http://jsfiddle.net/m1erickson/sHC6x/
如果设置context.globalCompositeOperation =“destination-out”,则任何新图形都将“擦除”任何现有图形。这意味着您可以擦除顶部画布以在底部画布上显示图像。
此代码(在mousemove内部)将允许您将鼠标用作顶部画布上的橡皮擦。
topContext.save();
topContext.globalCompositeOperation="destination-out";
topContext.beginPath();
topContext.moveTo(startX,startY);
topContext.lineTo(mouseX,mouseY);
topContext.stroke();
您可以像这样设置上下文笔划设置,使10px宽的橡皮擦成圆形。
topContext.lineWidth=10;
topContext.lineCap = "round";