html5图片径向渐变怎么做,HTML5创建一个径向/圆渐变

HTML5创建一个径向/圆渐变

1、设计源码

HTML5创建一个径向/圆渐变

/**

* 创建一个径向/圆渐变

*/

function drawCircle()

{

//找到元素

var canvas = document.getElementById("canvas");

//创建context对象

var ctx = canvas.getContext("2d");

//创建一个径向/圆渐变

var gradient = ctx.createRadialGradient(200,200,5,90,60,200);

//方法规定 gradient 对象中的颜色和位置

gradient.addColorStop(0,"yellow");

//方法规定 gradient 对象中的颜色和位置

gradient.addColorStop(1,"blue");

//设置填充样式

ctx.fillStyle = gradient;

//填充一个矩形区域

ctx.fillRect(40,20,600,400);

}

2、实现结果

3、源码说明

(1)找到canvas元素

var canvas = document.getElementById("canvas");

(2)创建context元素

var ctx = canvas.getContext("2d");

(3)创建一个径向/圆渐变

var gradient = ctx.createRadialGradient(200,200,5,90,60,200);

(4)规定 gradient 对象中的颜色和位置

gradient.addColorStop(0,"yellow");

(5)设置填充样式

ctx.fillStyle = gradient;

(6)填充一个矩形区域

ctx.fillRect(40,20,600,400);

原文：http://blog.csdn.net/you23hai45/article/details/50095193