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();
}