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

总结：

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

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

3、body的onload事件

4、带参函数

效果：

代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <body onLoad="draw()">
 8     <canvas id="myCanvas" width="600px" height="300px" style="border: 1px solid #c3c3c3;">
 9         <script>
10             function draw(){
11                 var c=document.getElementById("myCanvas");
12                 var cxt=c.getContext("2d");
13                 for(var i=0;i<12;i++){
14                     for(var j=0;j<24;j++){
15                         cxt.fillStyle='rgb(240,'+Math.floor(255-11.5*i)+','+Math.floor(255-11.5*j)+')';
16                         cxt.beginPath();
17                         cxt.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
18                         cxt.closePath();
19                         cxt.fill();
20                     }
21                 }
22             }
23 //            draw();
24         </script>
25     </canvas>
26 </body>
27 </html>