HTML5 入门测试例子运动的球

最新推荐文章于 2021-06-20 21:11:53 发布

127001

最新推荐文章于 2021-06-20 21:11:53 发布

阅读量912

点赞数

文章标签： HTML5 HTML 测试运动的球

本文链接：https://blog.csdn.net/wangchun21/article/details/8896617

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5</title>
<script>

   var   ctx;
   var xx = 55;
   var yy = 250;
   var x = 05;
   var y = 5;
   var createPI = function()
   {
       //清除画布内容
       ctx.clearRect(0,0,800,600);
       //设置画布背景
       ctx.fillStyle = "#CCCCCC";
       ctx.fillRect(0,0,800,600);

       //设置球体阴影
       ctx.shadowBlur = 2;
       ctx.shadowColor = "#000000";

       //创建圆
       ctx.beginPath();
       ctx.fillStyle = "#000000";
       ctx.arc(xx,yy,50,0,2*Math.PI,false);




       //填充圆
       var grd = ctx.createRadialGradient(xx,yy,60,xx,yy,0);
       grd.addColorStop(0,"#000000");
       grd.addColorStop(1,"#FFFFFF");
       ctx.fillStyle=grd;


       //显示圆
       ctx.stroke();

       //显示填充
       ctx.fill();

       if(xx == 750)
       {
           x = -5;
       }
       if(xx == 50)
       {
           x = 5;
       }

       if(yy == 550)
       {
           y = -5;
       }
       if(yy == 50)
       {
           y = 5;
       }

       xx += x;
       yy += y;

   }

   function init(){
       ctx = document.getElementById("canvas").getContext("2d");
       setInterval(createPI,25);
       }
</script>
</head>

<body οnlοad="init();">
   <div align="center">
       <h1>HTML5 运动的球</h1>
       <canvas id="canvas" width="800" height="600" style="border:1px solid #000000;">
           你的浏览器不支持HTML5标签。
       </canvas>
    </div>


</body>
</html>

127001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 入门测试例子运动的球

HTML5 var ctx; var xx = 55; var yy = 250; var x = 05; var y = 5; var createPI = function() { //清除画布内容 ctx.clearRect(0,0,800,600); /
复制链接

扫一扫