canvas立體效果的圓環
分享一段程式碼例項,它利用canvas實現了立體圓環效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border:2px dotted #ccc; } </style> </head> <body> <canvas id="canvas" width="550" height="450"></canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); function drawTwoArcs() { context.beginPath(); context.arc(300, 190, 150, 0, Math.PI * 2, false); context.arc(300, 190, 100, 0, Math.PI * 2, true); context.fill(); } function draw() { context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.save(); context.shadowColor = "rgba(0,0,0,0.8)"; context.shadowOffsetX = 12; context.shadowOffsetY = 12; context.shadowBlur = 15; drawTwoArcs(); context.restore(); } context.fillStyle = "rgba(100,140,230,0.5)"; draw(); </script> </body> </html>
相關文章
- canvas 繪製立體圓環Canvas
- canvas繪製圓環效果程式碼例項Canvas
- canvas圓環百分比載入效果程式碼例項Canvas
- SVG實現的圓環旋轉效果SVG
- css立體按鈕效果CSS
- CSS3圓環效果程式碼CSSS3
- CSS 文字立體凸起效果CSS
- css立體效果程式碼例項CSS
- CSS3 圓環內部旋轉效果CSSS3
- canvas繪製滑鼠懸浮可以變大的立體小球Canvas
- css3實現的立體滾動效果CSSS3
- CSS3 文字立體凸起效果CSSS3
- CSS3 文字立體翻轉效果CSSS3
- 炫酷的圓環載入及數字滾動效果(上)
- 炫酷的圓環載入及數字滾動效果(下)
- canvas小球碰壁效果Canvas
- canvas矩形拖拽效果Canvas
- canvas簽名效果Canvas
- Canvas畫圖-一個比想象中更騷氣的圓(漸變圓環)Canvas
- css實現帶有陰影的立體文字效果CSS
- 陰影進階,實現更加的立體的陰影效果!
- canvas透明度的矩形效果Canvas
- canvas具有漸變效果的矩形Canvas
- canvas實現 漂亮的下雨效果Canvas
- 簡單的 canvas 翻角效果Canvas
- canvas繪製流星效果Canvas
- canvas實現波浪效果Canvas
- canvas小球擺動效果Canvas
- canvas蔚藍星空效果Canvas
- css3實現的3D立體旋轉效果CSSS33D
- CSS 陰影進階,實現更加的立體的陰影效果!CSS
- canvas實現的雪花飄落效果Canvas
- canvas實現的可愛小貓效果Canvas
- css實現立體效果橫向導航選單CSS
- CSS3簡單圓角立體按鈕效果CSSS3
- canvas設定陰影效果Canvas
- canvas圓形時鐘效果Canvas
- canvas繪製風車效果Canvas