利用HTML5的canvas制作万花筒动画特效

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style>
 5   #canvas{
  
 6            background-color:#cccccc;
 7          
 8      }
 9 </style>
10 <script>
11 window.onload=function(){
12    var canvas=document.getElementById("canvas");
13    var cobj=canvas.getContext("2d");
14    // var num=150;
15     var arr=[];
16
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的HTML5 Canvas幽灵动画代码: ```html <!DOCTYPE html> <html> <head> <title>Canvas Ghost Animation</title> <style> canvas { border: 1px solid black; margin: 20px; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置幽灵的初始位置和速度 var x = canvas.width / 2; var y = canvas.height / 2; var dx = 2; var dy = -2; // 绘制幽灵 function drawGhost() { ctx.beginPath(); ctx.arc(x, y, 20, 0, Math.PI * 2); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.rect(x - 20, y, 40, 40); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.arc(x, y + 40, 20, Math.PI, Math.PI * 2); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.closePath(); } // 动画循环 function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制幽灵 drawGhost(); // 更新位置 x += dx; y += dy; // 碰到边界时改变方向 if (x + dx > canvas.width - 20 || x + dx < 20) { dx = -dx; } if (y + dy > canvas.height - 20 || y + dy < 20) { dy = -dy; } } // 每隔10毫秒执行一次动画循环 setInterval(animate, 10); </script> </body> </html> ``` 在这个代码中,我们使用了HTML5的`<canvas>`标签来绘制图形。我们通过`canvas.getContext("2d")`获取到一个2D绘图上下文,然后使用绘图上下文的方法来绘制幽灵。 我们使用`setInterval`函数来循环执行动画,每隔10毫秒执行一次`animate`函数。在`animate`函数中,我们首先清除画布,然后绘制幽灵。接着更新幽灵的位置,如果碰到边界则改变方向。最后,循环执行动画直到页面关闭。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值