js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
更新時(shí)間：2015年06月05日 12:12:58 作者：pythoner
這篇文章主要介紹了js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法,涉及html5屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法。分享給大家供大家參考。具體實(shí)現(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è)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了JavaScript中獲取樣式的原生方法小結(jié),本文總結(jié)了5種JS獲取樣式的原生方法,并分別給出了實(shí)例,需要的朋友可以參考下2014-10-10
本篇文章主要介紹了JS正則表達(dá)式驗(yàn)證中文字符的相關(guān)知識，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
JS 設(shè)計(jì)模式之：工廠模式定義與實(shí)現(xiàn)方法淺析
這篇文章主要介紹了JS 設(shè)計(jì)模式之：工廠模式,結(jié)合實(shí)例形式分析了JS 工廠模式基本概念、原理、定義、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)放大鏡效果，利用背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
JavaScript對象數(shù)組排序函數(shù)及六個(gè)用法
本文給大家分享一個(gè)用于數(shù)組或者對象的排序的函數(shù)。該函數(shù)可以以任意深度的數(shù)組或者對象的值作為排序基數(shù)對數(shù)組或的元素進(jìn)行排序2015-12-12
js獲取checkbox復(fù)選框選中的選項(xiàng)實(shí)例
這篇文章主要介紹了js如何獲取checkbox復(fù)選框選中的選項(xiàng),比較適合新手，需要的朋友可以參考下2014-08-08
Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法
這篇文章主要介紹了使用Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript創(chuàng)建表格的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
最新JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號實(shí)例(2022)
在前端開發(fā)過程中,通過使用JS的正則表達(dá)式來校驗(yàn)輸入的郵箱或者手機(jī)號是否正確,這也是一個(gè)非常常見的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號的相關(guān)資料,需要的朋友可以參考下2022-08-08
本篇文章主要是對js/jquery獲取文本框輸入焦點(diǎn)的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03