在实现下面功能首先的先明白canvas是做什么的？能解决什么问题？
Canvas是一个HTML元素，可用于在网页上绘制图形、动画和其他可视化效果。它通过JavaScript编程接口来实现。
Canvas可以用于各种任务，包括绘制图表、创建游戏、制作交互式的用户界面等。它可以处理大量的图形和动画，并且具有良好的性能和响应速度。
Canvas的优势包括：
Canvas的一些劣势：
Canvas可以实现功能，例如：
第一种
varcanvas=document.createElement("canvas");constcontext=canvas.getContext('2d');document.body.appendChild(canvas);注：实际操作使用第二种更加友好，因为通过第二种的添加方式，可以在调用canvasAPI时候有代码提示。
一般设置画布和画笔都会做前置条件，例如：设置画布大小，画笔的粗细颜色等信息，例如：
varcanvas=document.createElement("canvas");canvas.classList.add("scratcanvas");canvas.width=width;canvas.height=height;constcontext=canvas.getContext('2d');2画笔画笔有两种3D和2D两种，演示功能主要使用2d画笔，所以接下来围绕2d画笔说。
2D画笔具有以下功能：
使用context.beginPath()方法，为不同部分的途径设置开关(设置分组)。只对紧邻这组路径进行绘制。通过这种方式，表示绘图上下文以下绘画的路径方式将不会影响之前绘画内容。
ctx.beginPath();ctx.moveTo(50,50);//开始绘画点ctx.lineTo(250,50);//经过点ctx.stroke();//结束直线绘制举个例子
clearRect()方法接受四个参数，分别是：
context4.closePath()context4.clearRect(0,0,width,height);5引入图像在画布上引入图像的方式需要通过
通过drawImage将image塞入到canvas组件中，绘制图像参数：
图像合成是指在Canvas中将多个图像或者样式叠加在一起，从而创建出复杂的绘图效果。这个就是canvas能够实现很多复杂多变效果的方式，目前还没有研究透彻。主要是利用是globalCompositeOperation属性。该属性用于设置绘制操作时的合成模式，决定了新的绘制内容如何与已有的内容进行合成。列举一些globalCompositeOperation属性可以设置为不同的值来实现不同的合成效果。以下是常见的一些值：
实现刮刮乐效果是通过两张图层进行重叠实现，一张是img或div作为结果放在底部，在上面覆盖一层canvas灰色的画布进行遮盖，当鼠标在canvas上移动则消除灰色区域从而实现刮刮卡效果
在页面上写一个div
//统一宽高constwidth=400;constheight=300;//创建一个开奖结果//创建画布，用户刮开则显示开奖结果letdiv=document.createElement("div");div.innerText="一等奖"div.className="scrat"document.getElementById("card").appendChild(div);2创建canvas使用canvas创建绘制刮刮乐蒙版
//创建一个canvasvarcanvas=document.createElement("canvas");canvas.classList.add("scratcanvas");//设置宽高canvas.width=width;canvas.height=height;//设置画笔constcontext=canvas.getContext('2d');通过画笔中的fillstyle实现将某个区域填充灰色。
//画一个灰色画布遮住界面context.fillStyle="#EFEFEF";context.fillRect(0,0,width,height);再通过画笔绘制线条，之后通过线条和页面中重叠的地方进行消除，即可实现刮刮卡效果，将canvas添加到class叫scrat的div中。
//画一个圆//画笔分割context.beginPath();//设置画笔的粗细context.lineWidth=20;//转角和端点设置为圆弧context.lineCap="round"context.lineJoin="round"document.getElementsByClassName("scrat")[0].appendChild(canvas);3添加鼠标事件添加点击移动事件，主要是监听用户鼠标三个事件，1、按下鼠标左键；2、移动鼠标；3、抬起鼠标左键。具体实现通过document.addEventListener来监听mousedown、mousemove、mouseup三种情况，修改鼠标状态isMouseDown的true和false来实现。
//鼠标是否按下状态varisMouseDown=false;//鼠标按下，划线document.addEventListener('mousedown',function(event){isMouseDown=true;//新旧图层重叠部分透明context.globalCompositeOperation='destination-out';//封装函数，通过getCanvasPosition传入鼠标位置，获取在canvas中对应的位置var{x,y}=getCanvasPosition(event);//开始画线context.moveTo(x,y);});//在这里可以对鼠标位置进行处理document.addEventListener('mousemove',function(event){if(!isMouseDown)return;var{x,y}=getCanvasPosition(event);context.lineTo(x,y);context.stroke();});document.addEventListener('mouseup',function(event){isMouseDown=false;});//封装函数。计算canvas位置functiongetCanvasPosition(event){//获取鼠标当前位置varx=event.clientX;vary=event.clientY;//减去div的位置x-=div.offsetLeft;y-=div.offsetTop;//减去canvas的位置x-=canvas.offsetLeft;y-=canvas.offsetTop;return{x,y};}最后再调整下页面的样式，通过子绝父相的css来实现重叠。
当会了刮刮卡效果后可以在此基础上实现电子签名的功能，同样是使用画笔的功能，同样可以先创建一个div，并添加三个按钮
/***签名组件*/constwidth=400;constheight=300;varisSign=false;//是否开启签名状态varisEraser=false;//是否开启橡皮擦varbrushSize=10;//笔粗细varbrushColor="#000";//笔颜色//签名组件constdraw=document.createElement("canvas");draw.classList.add("draw");draw.width=width;draw.height=height-30;draw.style.border="1pxsolid#ccc";//设置边框vartemp=document.getElementsByClassName("sign")[0];temp.appendChild(draw);//2d画笔varcontext2=draw.getContext('2d');context2.lineCap="round";context2.lineJoin="round";context2.lineWidth=brushSize;2鼠标事件封装一个画笔事件drawEvent()，之前通过document.addEventListener来监听mousedown、mousemove、mouseup三种，其实也可以通过组件的onmousedown、onmousemove、onmouseup实现：1、按下鼠标左键；2、移动鼠标；3、抬起鼠标左键的事件监听，原理像常用的onclick一样。
由于是签字所以会涉及两个状态，isSign（是否开启签名状态）、isEraser（是否开启橡皮擦）通过这两个状态来控制是否清除画布。
最后鼠标抬起，则清空鼠标移动和抬起事件，当用户再次按下鼠标则再次循环执行该事件，具体实现可以看下列详细代码。
//开启签字，或关闭签字document.getElementById("save").onclick=function(){isSign=!isSignif(isSign){//开始签名//console.log("开始签名");document.getElementById("save").innerText="保存";}else{//保存，生成png图片//console.log("保存");document.getElementById("save").innerText="重新";download(draw.toDataURL(),"签名.png");//设置初始值isEraser=false;//关闭橡皮擦}}在上面download(draw.toDataURL(),"签名.png")保存后调用download下载方法，并传入了canvas当前画部的数据和导出名字draw.toDataURL()是获取一个base64的图片数据，这时如何进行下载？可以通过调用a标签实现图片下载。
//清空画布内容document.getElementById("anew").onclick=function(){if(!isSign)return;//清空画布先结束之前操作context2.closePath()console.log("清空画布内容");context2.clearRect(0,0,width,height);context2.beginPath();//设置橡皮擦isEraser=false;drawEvent();}5橡皮擦·由于之前封装好了画笔事件，现在只需要改变isEraser状态，并重新调用画笔事件drawEvent()。
透明的含义是“看得透”。在计算机图形学中，透明通常用来描述某一部分的图像或者界面是可以看透的。例如，我们可以使用透明效果来实现深色图像的遮盖以及透视效果的创建。
透明度通常用一个0到1之间的实数值来表示，0表示完全透明，1表示完全不透明。
理解RGB色彩模式
RGB色彩模式是一种基于三原色的表示法，其中R表示红色，G表示绿色，B表示蓝色。通过混合不同比例的三原色，可以得到不同的颜色。透明度通常由一个透明度值表示，这个值也是一个0到1的实数。
下面是一个使用RGB表示法表达透明颜色的例子：
background:rgba(255,0,0,0.5);在上面的例子中，我们使用rgba()函数来表示一个透明度为0.5的红色背景。其中，“a”表示alphachannel，也就是透明度通道。
用刚才导出图片为例子，可以看出透明区域的rgba和写了文字的rgba是通过最后一个a值判断，透明区域的rgba(0,0,0,0)而有文字区域rgba(0,0,0,1)可以明确一点最后一个值肯定a>0
/***涂抹截取*1、创建图片作为背景；**/varisDaub=false;//是否开启涂抹状态varisErase=false;//是否开启橡皮擦constwidth=400;constheight=300;创建一个img图层放在页面class为shear的位置上，同时创建canvas图层也放在页面class为shear的位置上。
constimg=document.createElement("img");img.src="./21092414350ML0-0-lp-350.jpg";img.classList.add("daub");img.width=width;img.height=height-30;document.getElementsByClassName("shear")[0].appendChild(img);constdaub=document.createElement("canvas");daub.classList.add("daub");daub.width=width;daub.height=height-30;document.getElementsByClassName("shear")[0].appendChild(daub);设置画笔基本属性，因为这次是在img上涂抹，所以需要将画笔颜色设置为半透明，这样才不会完全遮盖图片context4.strokeStyle="rgb(23214938/50%)。
//2d画笔varcontext4=daub.getContext('2d');context4.lineCap="round";context4.lineJoin="round";context4.lineWidth=20;context4.strokeStyle="rgb(23214938/50%)";//设置透明渡的颜色选取内容2、鼠标事件这里涂抹是橡皮擦实现原理和签字组件类似，封装一个画笔事件drawEvent()，之前通过组件的onmousedown、onmousemove、onmouseup实现：1、按下鼠标左键；2、移动鼠标；3、抬起鼠标左键的事件监听，使用方法如常用的onclick一样。根据两个状态，isDaub（是否开启涂抹状态）、isErase（是否开启橡皮擦）通过这两个状态来控制是否清除画布。最后鼠标抬起，则清空鼠标移动和抬起事件，当用户再次按下鼠标则再次循环执行该事件，具体实现可以看下列详细代码。
/***涂抹/橡皮擦事件**/daubEvent();functiondaubEvent(){daub.onmousedown=function(event){if(!isDaub)return;//开始新的路径或继续现有路径if(isErase){context4.globalCompositeOperation='destination-out';}else{context4.globalCompositeOperation='source-over';}context4.beginPath();context4.moveTo(event.offsetX,event.offsetY);daub.onmousemove=function(event){if(isErase){//设置橡皮擦粗细context4.lineWidth=20;//设置字体10号context4.strokeStyle="rgba(0,0,0,1)";context4.globalAlpha=1;}else{context4.strokeStyle="rgb(23214938/75%)";//设置透明渡的颜色选取内容context4.lineWidth=brushSize;//设置字体10号context4.globalAlpha=0.01;}context4.lineTo(event.offsetX,event.offsetY);context4.stroke();}daub.onmouseup=function(event){daub.onmousemove=null;daub.onmouseup=null;}}}涂抹、重置、橡皮擦功能同样和电子签字一致，由于刚才已经封装了点击事件，只需要通过控制isDaub和isErase两个状态来管理画布如何绘画。