canvas刮图效果 html+css+js
【摘要】 效果（完整代码在底部）：
实现（原理是比较简单的）：
1.定义标签：
<canvas id="canvas"></canvas>
1
2.canvas基本css样式：
canvas{ background-image: url(img/对比图/1.1.png); background-size: cover; }
1234
background-imag...
效果（完整代码在底部）：
实现（原理是比较简单的）：
1.定义标签：
<canvas id="canvas"></canvas>
- 1
2.canvas基本css样式：
canvas{ background-image: url(img/对比图/1.1.png); background-size: cover; }
- 1
- 2
- 3
- 4
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;
- 1
- 2
- 3
- 4
4.绘制一张漫画图片覆盖在真人钢铁侠上面：
var img = new Image(); img.src = "img/对比图/1.png"; img.onload=function(){ ctx.drawImage(img,0,0,243,528); }
- 1
- 2
- 3
- 4
- 5
5.定义变量 isDown，判断鼠标是否是一直按压着：
var isDown = false; canvas.addEventListener('mousedown',function(){ isDown = true; }) canvas.addEventListener('mouseup',function(){ isDown = false; })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
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'; } })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
完整代码：
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
总结：
图片：
下次再更个css特效，假期一直在玩Q_Q
文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/luo1831251387/article/details/115498568
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）