在画布上绘制文字

你的浏览器不支持画布(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");

	// 文字填充颜色
	ctx.fillStyle    = '#1EFF00';
	ctx.font         = '72px Verdana';
	ctx.fillText('普通文字', 300, 200);

	// 空心字
	ctx.strokeStyle  = '#FF8000';
	ctx.strokeText('空心字', 300, 280);

	// 保存画布状态
	ctx.save();

	// 阴影字
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur    = 4;
	ctx.shadowColor   = 'rgba(255, 255, 255, 0.5)';
	ctx.fillText('阴影字', 300, 360);

	// 恢复画布状态
	ctx.restore();

	// 保存画布状态
	ctx.save();

    // 创建线性渐变
    var grd = ctx.createLinearGradient(300, 440, 516, 512);

	// 添加渐变颜色
	grd.addColorStop(0,   '#FFFF00');
	grd.addColorStop(0.5, '#A335EE');
	grd.addColorStop(1,   '#0000FF');

	// 使用渐变色填充
	ctx.fillStyle = grd;
	ctx.fillText("渐变字", 300, 440);

	// 恢复画布状态
	ctx.restore();
}
					

返回目录