在画布上使用自定义字体

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

	setInterval(draw, 30);
}

function draw()
{
	// 清空画布
	ctx.clearRect(0, 0, mc.width, mc.height);

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

	// 文字填充颜色
	ctx.fillStyle    = '#FFFFFF';

	// 使用网站上字体
	ctx.font         = '72px MyFont';

	// 阴影字
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur    = 6;
	ctx.shadowColor   = 'rgba(157, 29, 57, 0.8)';
	ctx.fillText('Made by Chinafish', 160, 360);

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

返回目录