首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

替代Flash技术最好的选择------HTML5(5)

替代Flash技术最好的选择------HTML5(5)

5、代码示例
<script>
var canvas = document.getElementsByTagName('canvas')[0];

         var context = canvas.getContext("2d");
     
         function myCanvas() {
         
            var r = Math.floor(Math.random()*256);
              var g = Math.floor(Math.random()*256);
              var b = Math.floor(Math.random()*256);
        
              const WIDTH = canvas.width;
              const HEIGHT = canvas.height;
     
              var x = Math.random()*WIDTH;
              var y = Math.random()*HEIGHT;
     
              var width = Math.random()*WIDTH;
              var height = Math.random()*HEIGHT;
              //让图形生成在canvas里
              if((x+width)>=WIDTH){
                //重新生成
                  x = Math.random()*WIDTH;
                  width = Math.random()*WIDTH;
              }
              if((y+height)>=height){
                  y = Math.random()*height;
                  height = Math.random()*height;
              }
            context.strokeStyle = "rgb("+r+","+g+","+b+")";
            context.strokeRect(x,y,width,height);
           }
         setInterval(myCanvas,1000);
     </script>

6、运行结果
返回列表