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