歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > DIV+CSS基礎 >
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas吃豆魚</title> </head> <style> body{ text-align:center; } canvas{ background: #efefef; } </style> <body> <h1> 角度轉為弧度:<br /> 弧度=2*PI*角度/360=角度*PI/180 </h1> <!--畫布的寬和高只能使用屬性,不能使用樣式--> <canvas id='a1' width="500" height="400"></canvas> </body></html><script> var ctx=a1.getContext('2d');//得到畫布上的畫筆并設置繪制方式 function openMouse(){ //繪制圓(3/4) ctx.beginPath();//開始一條路徑 ctx.arc(250,200,100,45*Math.PI/180,315*Math.PI/180);//圓心為(250,200),半徑為100 ctx.lineTo(250,200); ctx.closePath(); ctx.stroke();//勾勒輪廓/描邊 ctx.fillStyle='#00ffff'; ctx.fill(); eye(); } //openMouse(); function closeMouse(){ ctx.beginPath();//開始一條路徑 ctx.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);//圓心為(250,200),半徑為100 ctx.lineTo(250,200); ctx.closePath(); ctx.stroke();//勾勒輪廓/描邊 ctx.fillStyle='#00ffff'; ctx.fill(); eye(); } //closeMouse(); //繪制公共部分眼睛 function eye(){ //繪制眼睛 ctx.beginPath(); ctx.arc(250,200-100/2,25,0,2*Math.PI);//眼睛半徑為25 ctx.stroke(); ctx.fillStyle='#001900'; ctx.fill(); //繪制眼神光 ctx.beginPath(); ctx.arc(265,140,5,0,2*Math.PI);//眼神光半徑為5 ctx.stroke(); ctx.fillStyle='#ffffff'; ctx.fill(); } var isOpen=true;//定義變量isOpen:是否張開 var timer=setInterval(function(){ var ctx=a1.getContext('2d'); ctx.clearRect(0,0,500,400);//清空畫布大小 if(isOpen){ closeMouse(); isOpen=false; }else{ openMouse(); isOpen=true; } },500);</script>

如需轉載,請注明文章出處和來源網址:http://www.5015168.live/rumen/r50584.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.5015168.live DIVCSS5版權所有。

民生银行股票行情