js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
更新時間：2015年06月05日 12:12:58 作者：pythoner
這篇文章主要介紹了js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
</script>
</body>
</html>
希望本文所述對大家的web程序設(shè)計有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄唵蔚木W(wǎng)頁廣告特效實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
IE中直接運行顯示當(dāng)前網(wǎng)頁中的圖片 推薦
IE中直接運行顯示當(dāng)前網(wǎng)頁中的圖片 推薦...2006-08-08
JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法
這篇文章主要介紹了JS排序算法之希爾排序與快速排序?qū)崿F(xiàn)方法,結(jié)合實例形式分析了希爾排序與快速排序的原理及javascript實現(xiàn)技巧,需要的朋友可以參考下2017-12-12
在我們?nèi)粘９ぷ鬟^程中,我們對于javaScript遍歷對象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對象的五種方式,需要的朋友可以參考下2021-10-10
javascript中巧用“閉包”實現(xiàn)程序的暫停執(zhí)行功能
javascript中巧用“閉包”實現(xiàn)程序的暫停執(zhí)行功能...2007-04-04
JavaScript中報錯Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了JavaScript中報錯Cannot?set?properties?of?undefined?(setting?'1')的解決方案,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或使用js具有一定的參考借鑒價值,需要的朋友可以參考下2025-03-03
學(xué)著js的繼承，自己也寫了個。感覺不是很好?，F(xiàn)在很多代碼都封裝成類。2010-08-08
JavaScript Archive Network 集合...2007-05-05
兩種常用的javascript數(shù)組去重方法思路及代碼
第一種是常規(guī)的方法:建一個新的數(shù)組存放結(jié)果,for循環(huán)中每次從原數(shù)組中取出一個元素，用indexOf查找新數(shù)組中是否有該元素，至于第二種詳細的看下本文哦2013-03-03
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單
javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單...2007-05-05