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,false); cans.closePath(); cans.lineWidth = 5; cans.strokeStyle = 'red'; cans.stroke(); } window.onload=function(){ pageLoad(); } </script> <body> <canvas id="can" width="400px" height="300px"></canvas> </body> </html>
相關文章
- canvas 繪製圓形Canvas
- canvas繪製多個圓圈效果Canvas
- 使用canvas繪製圓形進度條Canvas
- html5中canvas繪製圓形HTMLCanvas
- canvas繪製圓盤走動鐘錶效果Canvas
- canvas繪製橢圓效果程式碼例項Canvas
- canvas繪製圓形鐘錶程式碼例項Canvas
- canvas繪製實心圓形程式碼例項Canvas
- HTML5 Canvas使用路徑——繪製圓形HTMLCanvas
- canvas圓形時鐘效果Canvas
- Vue canvas繪製圓形進度條動畫載入VueCanvas動畫
- canvas 繪製圓角矩形Canvas
- canvas繪製流星效果Canvas
- canvas圓形隨機漂浮效果Canvas隨機
- canvas繪製矩形框Canvas
- 【Web前端基礎知識】如何使用Canvas繪製圓形Web前端Canvas
- SVG <circle> 繪製圓形SVG
- 使用canvas繪製圓弧動畫Canvas動畫
- canvas繪製不重合的圓Canvas
- canvas繪製風車效果Canvas
- canvas繪製圓形圖案程式碼示例簡單介紹Canvas
- canvas實現的圓形時鐘效果Canvas
- Canvas 繪製 3d 圓柱體Canvas3D
- canvas繪製卡通人臉形象效果Canvas
- canvas繪製網格射線效果Canvas
- BitmapShader繪製圓形圖片
- css繪製圓形程式碼例項CSS
- 微信小程式 canvas圓角矩形的繪製微信小程式Canvas
- canvas繪製圓角矩形程式碼例項Canvas
- canvas核心技術-如何繪製圖形Canvas
- canvas繪製三角形Canvas
- HTML5使用canvas繪製圖形HTMLCanvas
- canvas實現的圓形走動鐘錶效果Canvas
- canvas繪製矩形並填充顏色程式碼例項Canvas
- canvas繪製經典星空連線效果Canvas
- canvas繪製太陽系運動效果Canvas
- canvas繪製北斗七星效果Canvas
- canvas繪製圓環效果程式碼例項Canvas