HTML5 Canvas 绘制六叶草
生活随笔
收集整理的這篇文章主要介紹了
HTML5 Canvas 绘制六叶草
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
注意：
context.arc(橫坐標,縱坐標,弧半徑,起始角度,終止角度,逆順時針);這個函數挺難用，主要原因是最后參數和角度的關系。
不管文檔怎么說，按我的實際經驗，逆順時針=false時，是逆時針旋轉；逆順時針=true時，是順時針旋轉。
搞清楚這個，再來看角度。看下面語句： context.arc(x,y,r,getRad(60),getRad(120),false);
這句話意思是以x,y為圓心，半徑r畫弧，逆時針轉60度為起始點，逆時針轉120度為終止點。
另外逆順時針不要換來換去，堅持習慣的方式畫到底最好。
代碼：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head><title>六葉草</title></head><body onload="draw()"><canvas id="myCanvus" width="204px" height="204px" style="border:1px dashed black;">出現文字表示你的瀏覽器不支持HTML5</canvas></body> </html> <script type="text/javascript"> <!--function draw(){var canvas=document.getElementById("myCanvus");var context=canvas.getContext("2d");context.fillStyle = "#336699";context.fillRect(0, 0, 204, 204);context.translate(102,102);//context.rotate(Math.PI/6);var r=100;// 半徑 context.beginPath(); context.arc(0,0,r,0,getRad(360),false); context.fillStyle="white"; context.closePath(); context.fill(); context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false);// 順時針，轉240度為起點，到300度為終點 context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false); // 順時針，轉60度為起點，到120度為終點 context.fillStyle="#336699"; context.closePath(); context.fill();context.beginPath(); context.arc(r,0,r,getRad(180),getRad(240),false);context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(0),getRad(60),false); context.fillStyle="#336699"; context.closePath(); context.fill();context.beginPath(); context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(120),getRad(180),false);context.arc(-r,0,r,getRad(300),getRad(360),false); context.fillStyle="#336699"; context.closePath(); context.fill();context.beginPath(); context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false);context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false); context.fillStyle="#336699"; context.closePath(); context.fill();context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(180),getRad(240),false);context.arc(-r,0,r,getRad(0),getRad(60),false); context.fillStyle="#336699"; context.closePath(); context.fill();context.beginPath(); context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(300),getRad(360),false);context.arc(r,0,r,getRad(120),getRad(180),false); context.fillStyle="#336699"; context.closePath(); context.fill();}function getRad(degree){return degree/180*Math.PI; } //--> </script>?
轉載于:https://www.cnblogs.com/xiandedanteng/p/7469783.html
總結
以上是生活随笔為你收集整理的HTML5 Canvas 绘制六叶草的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue 之 下载本地资源文件
- 下一篇： oneno浏览器插件_Send to O