
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>遮罩动画</title>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var H = 400,
W = 500;
var tempR = 100;
var tempH = Math.floor(Math.random() * H);
var tempW = Math.floor(Math.random() * W);
var ball = {
x: tempW,
y: tempH,
r: tempR
}
var img1 = new Image();
var img2 = new Image();
img1.src = 'img/1.png';
img2.src = 'img/2.png';
function render() {
canvas.height = H;
ctx.save();
ctx.beginPath();
ctx.drawImage(img2, 0, 0)
ctx.beginPath()
ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.clip();
ctx.drawImage(img1, 0, 0)
ctx.restore();
}
setInterval(render, 50);
canvas.onmousemove = function(e) {
ball.x = e.offsetX;
ball.y = e.offsetY;
}
canvas.addEventListener('touchmove', function(e) {
console.log(e.changedTouches[0].pageX)
ball.x = e.changedTouches[0].pageX;
ball.y = e.changedTouches[0].pageY;
})
</script>
</body>
</html>
<!--
遮罩动画自然有两个图片 ,遮罩图片和被遮罩图片,当然了还得有一个透过遮罩图片看
被遮罩图片的圆形(本次);
有几个需要注意的点;
1,想要移动 圆形 看被遮罩图片就需要设置事件,但需要注意的是,需要不断刷新
2,个人理解,圆形和被遮罩图片属于一个图片,就是说要变成一个整体,要和遮罩图片分开
1,定义遮罩图片,被遮罩图片,圆的r,h,w
2,在把作图的步骤放在函数内;
分成两个部分,即每个部分分割开来 = 》beginPath;
2.1;被遮罩图片
2.2,遮罩图片和圆
只显示圆覆盖的遮罩图片 = 》ctx.clip();
3,不断刷新函数=》图片
-->
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析