HTML5 Canvas 学习(1)

HTML5 Canvas API 可用于在支持 HTML5 的浏览器中绘图.

在使用 <canvas> 之前需要检查浏览器对 Canvas 支持与否, 如不支持应给予用户适应提示.

try {
    document.createElement("canvas").getContext("2d");
    document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser.";
} catch(e) {
    document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser.";
}

<p id="support"></p>

代码试图创建一个 canvas 对象并获取其上下文, 如果发生错误, 则浏览器不支持 Canvas API.

让我们开始使用 Canvas 吧!

<canvas id="diagonal" style="border: 1px solid;" width="200" height="200"></canvas>

在 canvas 绘制一条对角线.

function drawDiagonal() {
	var canvas = document.getElementById("diagonal");
	var context = canvas.getContext("2d");
	
	context.beginPath();
	context.moveTo(10, 10);
	context.lineTo(190, 190);
	context.stroke();
}

drawDiagonal();

代码首先获取 canvas 对象, 定义 context 变量, getContext('2d') 传入 canvas 类型, 参数 2d 是目前唯一可用的参数. 在未来可能有 'webgl' 参数用来绘制 3D 图形.

- 变换 -

变换(transformation) 是 canvas 中另一种绘图方式. 它是什么意思呢? 想像一下, 我们在 photoshop 中画一条曲线是怎么做的, 我们可以先画出一条直线, 然后按住鼠标, 拖动出一条弧形. 变换可以简单的理解成 从直接到修改完弧形这个过程. 每个操作在显示在 canvas 上之前都会经过 变换 这个过程, 当然了, 你可以不做任何任何的变换, 但是这个过程是一定存在的.

在这里, 关于可重用代码有一条重要的建议: 一般绘制都从原点开始, 应用变换直到达到希望的效果.

用变换的方法绘制对角线

function drawDiagonal2() {
	var canvas = document.getElementById("diagonal");
	var context = canvas.getContext("2d");
	
	context.save();
	context.translate(70, 140);
	context.beginPath();
	context.moveTo(0, 0);
	context.lineTo(70, -70);
	context.stroke();
	context.restore();
}