天天看點

html5--js函數在canvas中的應用

html5--js函數在canvas中的應用

總結:

1、script中的函數寫了要調用

2、rgb()這樣的模式的色彩比較适合做變量

3、body的onload事件

html5--js函數在canvas中的應用

 4、帶參函數

html5--js函數在canvas中的應用

效果:

html5--js函數在canvas中的應用

代碼:

html5--js函數在canvas中的應用
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>      

我的旨在學過的東西不再忘記(主要使用艾賓浩斯遺忘曲線算法及其它智能學習複習算法)的偏公益性質的完全免費的程式設計視訊學習網站:

​​fanrenyi.com​​;有各種前端、後端、算法、大資料、人工智能等課程。

​​版權申明:歡迎轉載,但請注明出處​​

一些博文中有一些參考内容因時間久遠找不到來源了沒有注明,如果侵權請聯系我删除。​