电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 替代Flash技术最好的选择------HTML5（5） [打印本页]

作者: look_w 时间: 2019-2-19 15:53 标题: 替代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、运行结果

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)