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>
我的旨在學過的東西不再忘記(主要使用艾賓浩斯遺忘曲線算法及其它智能學習複習算法)的偏公益性質的完全免費的程式設計視訊學習網站:
fanrenyi.com;有各種前端、後端、算法、大資料、人工智能等課程。
版權申明:歡迎轉載,但請注明出處
一些博文中有一些參考内容因時間久遠找不到來源了沒有注明,如果侵權請聯系我删除。