Canvas实现绘制矩形的效果

js部分letcanvas=$('#画布').get(0);让ctx=canvas.getContext('2d');canvas.width=700;canvas.height=700;ctx.strokeStyle='红色';ctx.fillStyle='绿色';$('#mask').隐藏();让原点=[0,0];让width2height=[0,0];$('#canvas').on('mousedown',mousedownHandler).on('mousemove',mousemoveHandler).on('mouseup',mouseupHandler);函数mousedownHandler(e){origin=[e.offsetX,e.offsetY];}functionmousemoveHandler(e){if(origin[0]!==0||origin[1]!==0){//确保按下才发生width2height=[e.offsetX-origin[0],e.offsetY-原点[1]]；ctx.clearRect(0,0,700,700);ctx.strokeRect(原点[0],原点[1],width2height[0],width2height[1]);}}functionmouseupHandler(e){$('#mask').show().css('top',e.clientY).css('left',e.clientX);diableCanvasEvent();}函数diableCanvasEvent(){$('#canvas').off('mousedown',mousedownHandler).off('mousemove',mousemoveHandler).off('mouseup',mouseupHandler);}$("#yes").click(function(){ctx.globalAlpha=0.2;ctx.fillRect(origin[0],origin[1],width2height[0],width2height[1]);$('#掩码').hide();origin=[0,0];});$("#no").click(function(){$('#mask').hide();ctx.clearRect(0,0,700,700);origin=[0,0];});查看demo效果矩形绘制完成后，canvas不再响应事件，需要重新加载页面重新绘制矩形。您还可以修改代码，以便在拖动矩形后不禁止画布上的事件。这样你就可以继续画画了。http://htmlpreview.github.io/...://github.com/cunzaizhuyi/canvasDemo/blob/master/src/mask.html源码地址https://github.com/cunzaizhuy...目录下找到mask.html文件，也就是本文的程序。其他几个程序也是基于canvas的小程序。附：业务目的：视频遮罩是一种遮挡视频一定区域的效果，可以用来遮挡电视台图标、广告、镜头中的敏感部位等，前端实现可以加一层画布给播放器进行绘图。