本篇教程探討了HTML5 canvas圖和實(shí)現(xiàn)填充漸變形狀，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML5+CSS3從入門到精通 。

<

html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

填充漸變形狀

window.addEventListener(‘load‘,eventWindowLoaded,false);

function?eventWindowLoaded(){

canvasApp();

}

function?canvasSupport(){

return?Modernizr.canvas;

}

function?canvasApp(){

if(!canvasSupport()){

return;

}else{

var?theCanvas?=?document.getElementById(‘canvas‘)

var?context?=?theCanvas.getContext("2d")

}

drawScreen();

function?drawScreen(){

//水平漸變值必須保持為0

var?gr?=?context.createLinearGradient(0,0,100,0);

//添加顏色端點(diǎn)

gr.addColorStop(0,‘rgb(255,0,0)‘);

gr.addColorStop(.5,‘rgb(0,255,0)‘);

gr.addColorStop(1,‘rgb(0,0,255)‘);

//應(yīng)用fillStyle生成漸變

context.fillStyle?=?gr;

context.fillRect(0,0,100,100);

}

}

你的瀏覽器無法使用canvas

小白童鞋；你的支持是我最大的快樂！！

在畫布上創(chuàng)建漸變填充有兩個(gè)基本選項(xiàng)：線性或者徑向。線性漸變創(chuàng)建一個(gè)水平、垂直或者對(duì)角線的填充圖案。徑向漸變自中心店穿件一個(gè)放射狀填充

本文由職坐標(biāo)整理并發(fā)布，希望對(duì)同學(xué)們有所幫助。了解更多詳情請(qǐng)關(guān)注職坐標(biāo)WEB前端HTML5/CSS3頻道！

總結(jié)

以上是生活随笔為你收集整理的HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。