html5--js函数在canvas中的应用

总结：

1、script中的函数写了要调用

2、rgb（）这样的模式的色彩比较适合做变量

3、body的onload事件

4、带参函数

效果：

代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

 <body onLoad="draw()">

     <canvas id="myCanvas" width="600px" height="300px" style="border: 1px solid #c3c3c3;">

         <script>

             function draw(){

                 var c=document.getElementById("myCanvas");

                 var cxt=c.getContext("2d");

                 for(var i=0;i<12;i++){

                     for(var j=0;j<24;j++){

                         cxt.fillStyle='rgb(240,'+Math.floor(255-11.5*i)+','+Math.floor(255-11.5*j)+')';

                         cxt.beginPath();

                         cxt.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);

                         cxt.closePath();

                         cxt.fill();

                     }

                 }

             }

 //            draw();

         </script>

     </canvas>

 </body>

 </html>

巴特西

html5--js函数在canvas中的应用

html5--js函数在canvas中的应用

总结：

效果：

代码：

最新文章

热门文章