绘制圆形探照灯

最新推荐文章于 2024-05-20 20:45:00 发布

菜鸟的修炼

最新推荐文章于 2024-05-20 20:45:00 发布

阅读量551

点赞数

本文链接：https://blog.csdn.net/life91/article/details/72666875

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>绘制探照灯</title>
</head>
<body>
   <canvas id="canvas" style="border:1px solid red"></canvas>
   <script >
       var canvas=document.getElementById('canvas');
       // 设置宽和高
       canvas.width=800;
       canvas.height=800;
       // 获取绘制的上下文
       var context=canvas.getContext('2d');
       var vx=5;
       var vy=10;
       var sx=400;
       var sy=400;
       // 设置圆的运行速度和圆心的位置
       function timer(context,sx,sy){
           context.clearRect(0,0,800,800);// 清空画布
           context.save();// 保存
           context.beginPath();// 设置开始位置
           context.fillStyle='black';//设置黑色的背景
           context.fillRect(0,0,800,800);

           context.beginPath();//设置圆形运动的区域，并限制其区域
           context.fillStyle='#fff';//设置圆形区域的颜色为白色
           context.arc(sx,sy,100,0,Math.PI*2);//设置圆的大小
           context.fill();//填充
           context.clip();//设置圆的运动路径边界

           context.font="bold 80px Arial";
           context.textAlign="center";//文本横向对齐在正中间
           context.fillStyle="red";//设置文字的填充颜色
           context.fillText("我是最可爱的人",400,100);
           context.fillText("我是一只小鸟",400,300);
           context.fillText("我是最可爱的人",400,500);
           context.fillText("我是最可爱的人",400,700);
           context.restore();//恢复到save的状态
       }
       setInterval(function(){
           if (sx>=700) {
               vx=-vx;
           }
           if (sx<=100) {
               vx=-vx;
           }
           if (sy>=700) {
               vy=-vy;
           }
           if (sy<=100) {
               vy=-vy;
           }
           sx+=vx;
       sy+=vy;
       timer(context,sx,sy);
       },200);

   </script>
</body>
</html>

菜鸟的修炼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绘制圆形探照灯

绘制探照灯 var canvas=document.getElementById('canvas'); // 设置宽和高 canvas.width=800; canvas.height=800; // 获取绘制的上下文 var context=canvas.g
复制链接

扫一扫