在画布上使用图案样式

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

	// 指定图片源
	img.src = '/IBlog/Html5/19Canvas_Pattern/Pattern.png';

	// 加载图片完成后
	img.onload = function()
	{
		// 创建图片样式 可取值 repeat 重复，repeat-x 水平重复，repeat-y 垂直重复， no-repea 不重复
		var ptrn = ctx.createPattern(img, 'repeat');

		// 绘制风格使用图片样式
		ctx.strokeStyle	= ptrn;

		// 填充风格使用图片样式
		ctx.fillStyle	= ptrn;

		// 定义字体
		ctx.font		= 'bold 120px Verdana';

		// 填充上方区域
		ctx.fillRect(0, 0, 800, 100);

		// 填充下方区域
		ctx.fillRect(0, 500, 800, 100);

		// 仅描边使用图片样式
		ctx.strokeText("请不要迷恋哥", 30, 250);

		// 填充使用图片样式
		ctx.fillText("哥只是个传说", 30, 450);
	}
}
					

返回目录