canvas簡單徑向漸變程式碼例項
分享一段程式碼例項,它使用一個簡單的程式碼演示了canvas中的徑向漸變。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <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'); var gnt = cans.createRadialGradient(200, 300, 50, 200, 200, 200); gnt.addColorStop(1, 'red'); gnt.addColorStop(0, 'green'); cans.fillStyle = gnt; cans.fillRect(0, 0, 800, 600); } window.onload = function () { pageLoad(); } </script> </head> <body> <canvas id="can" width="800" height="600"></canvas> </body> </html>
相關文章
- canvas徑向漸變程式碼例項Canvas
- css徑向漸變程式碼例項CSS
- canvas線性漸變程式碼例項Canvas
- css3實現的徑向漸變和線性漸變程式碼例項CSSS3
- canvas createRadialGradient() 徑向漸變Canvas
- css3線性漸變簡單程式碼例項CSSS3
- canvas實現文字線性漸變效果程式碼例項Canvas
- 使用canvas來完成線性漸變和徑向漸變的功能Canvas
- html5中canvas徑向漸變(發散)HTMLCanvas
- canvas實現的簡單餅狀圖程式碼例項Canvas
- canvas實現的簡單塗鴉板程式碼例項Canvas
- canvas實現的簡單畫板效果程式碼例項Canvas
- CSS3背景漸變效果程式碼例項CSSS3
- CSS3線性漸變和徑向漸變CSSS3
- jquery漸隱漸現程式碼例項jQuery
- canvas實現的變幻線程式碼例項Canvas線程
- canvas刮刮樂程式碼例項Canvas
- javascript元素透明度漸變效果程式碼例項JavaScript
- SVG <radialGradient> 徑向漸變SVG
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- js選項卡簡單程式碼例項JS
- canvas畫圖程式碼例項Canvas
- canvas小遊戲程式碼例項Canvas遊戲
- canvas火焰效果程式碼例項Canvas
- js map集合簡單程式碼例項JS
- javascript閉包簡單程式碼例項JavaScript
- javascript作用域簡單例項程式碼JavaScript單例
- JSON簡單格式程式碼例項JSON
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- canvas繪製扇形程式碼例項Canvas
- canvas繪製星星程式碼例項Canvas
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas 繪製雞蛋程式碼例項Canvas
- canvas縮放div程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- jQuery表單驗證簡單程式碼例項jQuery