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

转载

mb5fed4c003aebe 2017-12-20 02:54:00

文章标签 html5课程 html 微信人工智能大数据 文章分类 Html/CSS 前端开发

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

总结：

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

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

3、body的onload事件

html5--js函数在canvas中的应用_人工智能

4、带参函数

html5--js函数在canvas中的应用_人工智能_02

效果：

html5--js函数在canvas中的应用_html5课程_03

代码：

html5--js函数在canvas中的应用_人工智能_04

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>