在画布上绘制渐变色

你的浏览器不支持画布(Canvas).

我们可以通过新的HTML5画布（Canvas）标签添加一个画布到网页中，以下代码用于定义一个 800 x 600 大小的画布。

你的浏览器不支持画布(Canvas).
					

再通过以下 JavaScript 代码控制在画布中的绘图。

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;
if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// 创建线性渐变
	var grd = ctx.createLinearGradient(0, 0, mc.width/2, mc.height/2);

	// 渐变色
	grd.addColorStop(0,"red");
	grd.addColorStop(0.15,"orange");
	grd.addColorStop(0.3,"yellow");
	grd.addColorStop(0.45,"green");
	grd.addColorStop(0.6,"Cyan");
	grd.addColorStop(0.75,"blue");
	grd.addColorStop(1,"purple");

	// 设置填充渐变颜色
	ctx.fillStyle=grd;

	// 填充到画布上
	ctx.fillRect(0, 0, mc.width/2, mc.height/2);

	// 创建径向渐变
	grd = ctx.createRadialGradient(560, 110, 30, 600, 150, 150);

	// 渐变色
	grd.addColorStop(0, '#F4F201');
	grd.addColorStop(0.8, 'red');
	grd.addColorStop(1, 'rgba(228,199,0,0)');

	// 设置填充渐变颜色
	ctx.fillStyle=grd;

	// 填充到画布上
	ctx.fillRect(mc.width/2, 0, mc.width/2, mc.height/2);
}
					

返回目录