如何在屏幕触摸设备的画布上启用划痕或填充色彩效果？单击它后，它也可以正常工作。我想在悬停时执行此操作。而且我想在充满色彩的雕塑之后显示戒备。
使用此代码是否所有这些可能？
我做了这样的事情： https://codepen.io/santanup789/pen/vYYdLzo
var url = 'http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/11/New-Project2.jpg';
var canvas = document.getElementById('canvas');
var parentDiv = document.getElementById('parentBox');
var ctx = canvas.getcontext('2d');
var img = new Image();
img.src = url;
img.onload = function () {
var width = Math.min(500,img.width);
var height = img.height * (width / img.width);
canvas.width = width;
canvas.height = height;
ctx.drawImage(img,width,height);
};
var old = null;
canvas.addEventListener('mousedown',function (e){
isPress = true;
old = {x: e.offsetX,y: e.offsetY};
});
canvas.addEventListener('mousemove',function (e){
if (isPress) {
var x = e.offsetX;
var y = e.offsetY;
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(x,y,20,2 * Math.PI);
ctx.fill();
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(old.x,old.y);
ctx.lineTo(x,y);
ctx.stroke();
old = {x: x,y: y};
}
});
// fitToContainer(canvas);
// function fitToContainer(canvas){
// // Make it visually fill the positioned parent
// canvas.style.width ='100%';
// canvas.style.height='100%';
// // ...then set the internal size to match
// canvas.width = canvas.offsetWidth;
// canvas.height = canvas.offsetHeight;
// }
canvas.addEventListener('mouseup',function (e){
isPress = true;
});.box {
display: inline-block;
background: url("http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/10/bg.png");
background-size: contain;
position: relative;
width: 510px;
height: 335px;
box-shadow: 0 0 10px #ccc;
border-radius: 5px;
}
.box img {
width: 200px;
position: absolute;
top: 60%;
left: 51%;
transform: translate(-50%,-50%);
}
canvas {
background: transparent;
position: absolute;
top: 60%;
left: 51%;
transform: translate(-50%,-50%);
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" id='parentBox'>
<img src="http://colorgraphicz.biz/demo/colorgraphicz/wp-content/uploads/2019/10/cg.png" />
<canvas id="canvas"></canvas>
</div>