HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状

本篇教程探讨了HTML5 canvas图和实现填充渐变形状，希望阅读本篇文章以后大家有所收获，帮助大家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);

//添加颜色端点

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

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

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

//应用fillStyle生成渐变

context.fillStyle = gr;

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

}

}

你的浏览器无法使用canvas

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

在画布上创建渐变填充有两个基本选项：线性或者径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心店穿件一个放射状填充

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！