|
效果（完整代码在底部）：
 素材图1： 
素材图2：
实现（原理是比较简单的）：
1.定义标签：
<canvas id="canvas"></canvas>
2.canvas基本css样式：
canvas{
background-image: url(img/对比图/1.1.png);
background-size: cover;
}
background-image: url(img/对比图/1.1.png); 给个真人钢铁侠背景图。
background-size: cover; 背景图像完全覆盖背景区域。
3. 开始js部分，获取画布，设置基本大小：
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = 243;
canvas.height = 528;
4.绘制一张漫画图片覆盖在真人钢铁侠上面：
var img = new Image();
img.src = "img/对比图/1.png";
img.onload=function(){
ctx.drawImage(img,0,0,243,528);
}
5.定义变量 isDown，判断鼠标是否是一直按压着：
var isDown = false;
canvas.addEventListener('mousedown',function(){
isDown = true;
})
canvas.addEventListener('mouseup',function(){
isDown = false;
})
6.实现效果：
canvas.addEventListener('mousemove',function(event){
if(isDown){
//获取鼠标位置
let x = event.offsetX;
let y = event.offsetY;
//开始绘制路径，绘制小圆球
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(x,y,20,Math.PI*2,false);
ctx.fill();
ctx.closePath();
/*在源图像外显示目标图像。只有源图像外的目标
图像部分会被显示，源图像是透明的。*/
ctx.globalCompositeOperation = 'destination-out';
}
})
完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
canvas{
background-image: url(img/对比图/1.1.png);
background-size: cover;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = 243;
canvas.height = 528;
var img = new Image();
img.src = "img/对比图/1.png";
img.onload=function(){
ctx.drawImage(img,0,0,243,528);
}
canvas.addEventListener('mousemove',function(event){
if(isDown){
let x = event.offsetX;
let y = event.offsetY;
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(x,y,20,Math.PI*2,false);
ctx.fill();
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}
})
var isDown = false;
canvas.addEventListener('mousedown',function(){
isDown = true;
})
canvas.addEventListener('mouseup',function(){
isDown = false;
})
</script>
</body>
</html>
|
