html5教程實(shí)現(xiàn)Photoshop漸變色效果
發(fā)布時(shí)間：2013-12-04 16:14:45 作者：佚名 
我要評(píng)論
我要評(píng)論html5教程實(shí)現(xiàn)Photoshop漸變色效果，大家參考使用吧
復(fù)制代碼
代碼如下:<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5畫(huà)線、圓、矩形</title>
<script src="<a ></script</a>>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //獲取2d內(nèi)容的引用，調(diào)用繪圖API</p> <p>//指定漸變區(qū)塊
var grd=draw.createLinearGradient(50,50,200,50); //坐標(biāo)，長(zhǎng)寬
grd.addColorStop(0,"black"); //起點(diǎn)顏色
grd.addColorStop(1,"green"); //終點(diǎn)顏色</p> <p>draw.fillStyle=grd; //設(shè)為填充樣式
draw.fillRect(50,50,200,50); //填充進(jìn)矩形內(nèi)
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>
效果圖：
相關(guān)文章
html5+canvas實(shí)現(xiàn)的會(huì)變色且會(huì)舞動(dòng)的樹(shù)動(dòng)畫(huà)特效源碼
html5+canvas實(shí)現(xiàn)的會(huì)變色且會(huì)舞動(dòng)的樹(shù)動(dòng)畫(huà)特效源碼是一段實(shí)現(xiàn)了，基于canvas實(shí)現(xiàn)的迅速增長(zhǎng)，且會(huì)變色會(huì)舞動(dòng)的樹(shù)動(dòng)畫(huà)效果代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有需要的朋友2017-03-16
html5實(shí)現(xiàn)的變色彈珠跳臺(tái)階游戲源碼
這是一款基于html5實(shí)現(xiàn)的變色彈珠跳臺(tái)階游戲源碼。用戶可自由選擇紅、黃、紫三種顏色的變換順序，游戲中快速變換臺(tái)階顏色使之與變色彈珠小球顏色一致2017-02-13
HTML5 canvas實(shí)現(xiàn)漸變色圓形進(jìn)度條特效源碼
HTML5 canvas實(shí)現(xiàn)漸變色圓形進(jìn)度條動(dòng)畫(huà)是一款帶漸變色的圓形進(jìn)度條動(dòng)畫(huà)特效jQuery插件jquery-circle-progress，進(jìn)度條使用漸變色來(lái)填充2016-02-16使用javascript和HTML5 Canvas畫(huà)的四漸變色播放按鈕效果
這篇文章主要介紹了使用javascript和HTML5 Canvas畫(huà)的四漸變色播放按鈕效果,需要的朋友可以參考下2014-04-10html5 Canvas畫(huà)圖教程(4)—未閉合的路徑及漸變色的填充方法
一般繪圖的方式有兩種，即填充和描邊，前面的文章已經(jīng)講了描邊的方法stroke，本文就講一下Canvas中填充圖形的方法2013-01-09HTML中實(shí)現(xiàn)鼠標(biāo)經(jīng)停時(shí)整行（tr）變色
這篇文章主要介紹了HTML中實(shí)現(xiàn)鼠標(biāo)經(jīng)停時(shí)整行（tr）變色的相關(guān)資料,需要的朋友可以參考下2017-06-13
