canvas实现类似弹窗广告效果

时间:2023-03-08 19:49:22
canvas实现类似弹窗广告效果

先看看下面的效果图,想想使用canvas是怎样实现的?

如下图:

canvas实现类似弹窗广告效果

这个就不详细描述了,看代码就会了。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
#canvas {
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); ctx.fillStyle = "red";
ctx.fillRect(0,0,80,50); var speedX = 1,
speedY = 2,
i1 = 0,
i2 = 0;
w = 80,
h = 50,
dirX = true,
dirY = true;
function run() { if(dirX) {
i1++;
}else {
i1--;
}
if(dirY) {
i2++;
}else {
i2--;
}
//清除画布
ctx.clearRect(0,0,400,400); //判断边界
if(i1*speedX > (canvas.width - w)) {
dirX = false;
}else if(i1*speedX < 0){
dirX = true;
} if(i2*speedY > (canvas.height - h)) {
dirY = false;
}else if(i2*speedY < 0) {
dirY = true;
}
//绘制矩形
ctx.fillRect(i1*speedX,i2*speedY,w,h);
window.requestAnimationFrame(run);
}
window.requestAnimationFrame(run);
</script>
</body>
</html>