<style>#canvas {    border: 1px solid blue;    position: absolute;    left: 10px;    top: 10px;    background:url(../Images/1.jpg) no-repeat center center;    background-size:contain;}</style><canvas id="canvas"></canvas>

var canvas = document.getElementById(‘canvas‘);var ctx = canvas.getContext(‘2d‘);ctx.fillStyle = ‘gray‘;ctx.rect(0, 0, canvas.width, canvas.height);ctx.fill();//解决方案1是使用clearRect清空鼠标位置的像素var isClear = false;//设置清空部分canvas.onmousedown = function (ev) {    isClear = true;}canvas.onmouseup = function () {    isClear = false;}canvas.onmousemove = function (ev) {    if (isClear == false)        return;    ev = ev || window.event;    //清空像素,根据当前所在点    var curX = ev.clientX - canvas.offsetLeft;    var curY = ev.clientY - canvas.offsetTop;    var step = 20;    ctx.clearRect(curX - step / 2, curY - step / 2,        step, step);    ev.stopPropagation();}

var canvas = document.getElementById(‘canvas‘);var ctx = canvas.getContext(‘2d‘);ctx.fillStyle = ‘gray‘;ctx.rect(0, 0, canvas.width, canvas.height);ctx.fill();//解决方案2是使用globalCompositeOperation,重叠处理//优点使用 fill() 不限制是否是矩形//在与源不重叠的区域上保留目标。其他部分都变成透明的。ctx.globalCompositeOperation = ‘destination-out‘;var isClear = false;//设置清空部分canvas.onmousedown = function (ev) {    isClear = true;}canvas.onmouseup = function () {    isClear = false;}canvas.onmousemove = function (ev) {    if (isClear == false)        return;    ev = ev || window.event;    //清空像素,根据当前所在点    var curX = ev.clientX - canvas.offsetLeft;    var curY = ev.clientY - canvas.offsetTop;    var step = 10;    ctx.beginPath();    ctx.arc(curX, curY, step, 0, Math.PI * 2, false);    ctx.fill();    ev.stopPropagation();}