Javascript 再次将画布的像素设置为透明

我想画一个图像，擦除一些部分，然后再在上面画画。大致如下：

ctx.drawImage(favicon, 0, 0);
ctx.fillStyle = 'transparent';
ctx.fillRect(10, 0, 6, 6);
ctx.fillStyle = 'red';
ctx.fillRect(12, 0, 4, 4);

---

如何擦除部分图像？

。clearRect

是一个很好的选择，如对您的问题投赞成票的评论所示

如果要使非矩形区域（或仅一组像素）透明，则还可以使用

destination out

合成使这些像素透明

此示例从JellyBeans图像开始，并从中剪切出太阳图像：

果冻豆

太阳（用作不规则形状的橡皮擦）

删除太阳形状的果冻豆

注释示例代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var jellybeans=新图像（）；
jellybeans.onload=开始；
jellybeans.src=”https://dl.dropboxusercontent.com/u/139992952/multple/jellybeans.jpg";
var sun=新图像（）；
sun.onload=启动；
sun.src=https://dl.dropboxusercontent.com/u/139992952/multple/sun.png';
var-imageCount=2；
函数start（）{
//等待加载所有图像
如果（--imageCount>0）{return；}
//将画布调整为jellybean大小
canvas.width=jellybeans.width；
canvas.height=jellybeans.height；
//在画布上画果冻豆
ctx.drawImage（果冻豆，0,0）；
//将合成设置为“目标输出”
//所有新图形都将删除现有像素
ctx.globalCompositeOperation='destination-out'；
//绘制太阳图像
//绘图将从图形中删除太阳图像形状
//也可以使用任何图形命令（直线、圆弧、曲线等）进行擦除
ctx.drawImage（sun，100,50）；
//总是打扫卫生！
//将合成重置为默认模式
ctx.globalCompositeOperation='source-over'；
}

#画布{边框：1px纯红；边距：0自动；}

已擦除太阳形状的果冻豆

.clearRect

是一个很好的选择，正如对您的问题投赞成票的评论所示

如果要使非矩形区域（或仅一组像素）透明，则还可以使用

destination out

合成使这些像素透明

此示例从JellyBeans图像开始，并从中剪切出太阳图像：

果冻豆

太阳（用作不规则形状的橡皮擦）

删除太阳形状的果冻豆

注释示例代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var jellybeans=新图像（）；
jellybeans.onload=开始；
jellybeans.src=”https://dl.dropboxusercontent.com/u/139992952/multple/jellybeans.jpg";
var sun=新图像（）；
sun.onload=启动；
sun.src=https://dl.dropboxusercontent.com/u/139992952/multple/sun.png';
var-imageCount=2；
函数start（）{
//等待加载所有图像
如果（--imageCount>0）{return；}
//将画布调整为jellybean大小
canvas.width=jellybeans.width；
canvas.height=jellybeans.height；
//在画布上画果冻豆
ctx.drawImage（果冻豆，0,0）；
//将合成设置为“目标输出”
//所有新图形都将删除现有像素
ctx.globalCompositeOperation='destination-out'；
//绘制太阳图像
//绘图将从图形中删除太阳图像形状
//也可以使用任何图形命令（直线、圆弧、曲线等）进行擦除
ctx.drawImage（sun，100,50）；
//总是打扫卫生！
//将合成重置为默认模式
ctx.globalCompositeOperation='source-over'；
}

#画布{边框：1px纯红；边距：0自动；}

已擦除太阳形状的果冻豆