1. Canvas元素
以下html代码定义了一个canvas元素。
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html>
- <head>
- <title>Canvas快速入门</title>
- <meta charset="utf-8"/>
- </head>
- <body>
- <div>
- <canvas id="mainCanvas" width="640" height="480"></canvas>
- </div>
- </body>
- </html>
通过以下Javascript语句访问canvas元素：
JavaScript Code复制内容到剪贴板
-
- window.onload = function () {
- var canvas = document.getElementById("mainCanvas");
- var context = canvas.getContext("2d");
- };
-
- $(document).ready(function () {
- var canvas = $("#mainCanvas");
- var context = canvas.get(0).getContext("2d");
- });
-
2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。具体如下图：
2.2 绘制基本图形
2.2.1 矩形
JavaScript Code复制内容到剪贴板
-
- context.fillRect(x, y, width, height)
-
- context.strokeRect(x, y, width, height)
-
- context.clearRect(x, y, width, height)
2.2.2 线条
绘制线条与绘制图形有一些区别，线条实际上称为路径。要绘制一条简单的路径，首先必须调用beginPath方法，接着调用moveTo设置路径的起点坐标，然后调用lineTo设置线段终点坐标（可多次设置），再调用closePath完成路径绘制。最后调用stroke绘制轮廓（或调用fill填充路径）。以下为例子：
JavaScript Code复制内容到剪贴板
-
- context.beginPath();
- context.moveTo(40, 40);
- context.lineTo(300, 40);
- context.lineTo(40, 300);
- context.closePath();
- context.stroke();
-
2.2.3 圆形
Canvas实际上并没有专门绘制圆形的方法，可以通过画圆弧来模拟圆形。由于圆弧是一种路径，所以画圆弧的API应该包含在beginPath和closePath之间。
2.3 样式
2.3.1 修改线条颜色
JavaScript Code复制内容到剪贴板
- var color;
-
- color = "rgb(255, 0, 0)";
-
- color = "rgba(255, 0, 0, 1)";
-
- color = "#FF0000";
-
- color = "red";
-
- context.fillStyle = color;
-
- context.strokeStyle = color;
2.3.2 修改线宽
JavaScript Code复制内容到剪贴板
-
- var value= 3;
-
- context.linewidth = value;
2.4 绘制文本
JavaScript Code复制内容到剪贴板
-
- context.font = "italic 30px 黑体";
-
- context.fillText("Hello world!", 40, 40);
2.5 绘制图像
在绘制图像之前，需要先定义图像并加载。
CSS Code复制内容到剪贴板
- var img = new Image();
- img.src = "myImage.png";
- img.onload = function () {
- //图像加载完毕执行
- };
以下是drawImage API解释：
JavaScript Code复制内容到剪贴板
-
- context.drawImage(image, x, y)
-
- context.drawImage(image, x, y, width, height)
-
- context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
3. 高级功能
3.1 使Canvas填满浏览器窗口
最简单的方式是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度，用CSS消去白色空隙。
CSS代码：
CSS Code复制内容到剪贴板
- * {
- margin: 0;
- padding: 0;
- }
-
- html, body {
- height: 100%;
- width: 100%;
- }
-
- canvas {
- display: block;
- }
Javascript代码：
JavaScript Code复制内容到剪贴板
- function resizeCanvas() {
-
- canvas.attr("width", $(window).get(0).innerWidth);
- canvas.attr("height", $(window).get(0).innerHeight);
- context.fillRect(0, 0, canvas.width(), canvas.height());
- }
- $(window).resize(resizeCanvas);
- resizeCanvas();
3.2 绘图状态
在canvas中，绘图状图指的是描述某一时刻2D渲染上下文外观的整套属性，包括：变换矩阵、裁剪区域、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
当需要改变画布全局状态时，一般先将当前状态保存起来——调用save方法将状态推入绘图状态栈），做完操作之后，再调用restore方法回复绘图状态。
JavaScript Code复制内容到剪贴板
-
- context.save();
- context.globalAlpha = 0.5;
- context.fillRect(0, 0, 200, 100);
- context.restore();
3.3 变形
3.3.1 平移
将2D渲染上下文的原点从一个位置移动到另一个位置。注意，这里移动的是坐标原点即全局绘图位置，API如下：
3.3.2 缩放
3.3.3 旋转
