canvas繪製圓形圖案程式碼示例簡單介紹
本章節介紹一下如何使用canvas繪製圓形圖案。
程式碼示例如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <style type="text/css"> canvas{ border:dashed 2px #CCC } </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(200,150,100,0,Math.PI*2,true); cans.closePath(); cans.fillStyle = 'green'; cans.fill(); } window.onload=function(){ pageLoad(); } </script> <body> <canvas id="can" width="400px" height="300px"></canvas> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
程式碼註釋:
(1).function $$(id){
return document.getElementById(id);
},這個模擬實現了類似於jQuery的id選擇器的功能。
(2).function pageLoad(){},此函式實現的繪製功能。
(3).var can = $$('can'),獲取畫布元素。
(4).var cans = can.getContext('2d'),建立一個繪圖環境。
(5).cans.beginPath(),開始一條繪製路徑。
(6).cans.arc(200,150,100,0,Math.PI*2,true),繪製一個圓心座標是(200,150),邊境時100的圓形。
(7).cans.closePath(),進行路徑的繪製。
(8).cans.fillStyle = 'green',設定填充顏色為綠色。
(9).cans.fill(),次方法可以填充當前的路徑,那麼就形成一個圓形,裡面具有填充顏色的。
相關文章
- canvas 繪製圓形Canvas
- canvas繪製圓形鐘錶程式碼例項Canvas
- canvas繪製實心圓形程式碼例項Canvas
- border-radius繪製圓形圖案程式碼例項
- 使用canvas繪製圓形進度條Canvas
- html5中canvas繪製圓形HTMLCanvas
- css繪製圓形程式碼例項CSS
- canvas繪製圓角矩形程式碼例項Canvas
- canvas繪製橢圓效果程式碼例項Canvas
- canvas繪製圓形框效果不填充內部Canvas
- HTML5 Canvas使用路徑——繪製圓形HTMLCanvas
- canvas繪製網狀圓圈程式碼例項Canvas
- SVG繪製直線簡單介紹SVG
- javascript繪製心形圖案程式碼例項JavaScript
- Vue canvas繪製圓形進度條動畫載入VueCanvas動畫
- canvas 繪製圓角矩形Canvas
- BitmapShader繪製圓形圖片
- canvas的簡單圓形進度條Canvas
- canvas核心技術-如何繪製圖形Canvas
- HTML5使用canvas繪製圖形HTMLCanvas
- 【Web前端基礎知識】如何使用Canvas繪製圓形Web前端Canvas
- SVG <circle> 繪製圓形SVG
- 微信小程式 canvas圓角矩形的繪製微信小程式Canvas
- 使用canvas繪製圓弧動畫Canvas動畫
- canvas繪製不重合的圓Canvas
- WPF基礎:在Canvas上繪製圖形Canvas
- [譯]WebAssembly: 帶有程式碼示例的簡單介紹Web
- css3繪製心形圖案程式碼例項CSSS3
- canvas標籤簡單介紹Canvas
- 標準圓形餅圖Python繪製方法Python
- CSS繪製橢圓程式碼CSS
- canvas繪製多個圓圈效果Canvas
- canvas 繪製圖案是重疊繪製而不是重置Canvas
- canvas繪製圖案是重疊繪製而不是重置Canvas
- CSS魔法系列:純CSS繪製基本圖形(圓、橢圓等)CSS
- 使用Canvas繪製簡單工程符號(續)Canvas符號
- Canvas 繪製 3d 圓柱體Canvas3D
- canvas繪製扇形程式碼例項Canvas