阅读量:0
HTML5 Canvas的基本语法包括创建canvas元素，获取绘图上下文，并使用绘图方法进行绘制。
最复杂的一种，允许在显示图像前动态裁剪源图像
let img = theImage = new Image()
HTML5 canvas 基本语法
HTML5 Canvas 基本语法
HTML5 规范引入了许多新特性，其中最引人注目的是<canvas> 元素，HTML5 通过 JavaScript 提供了绘制图形的方法，这种方法虽然简单但功能强大，每个<canvas> 元素都拥有一个“上下文（context）”，可以将其想象成绘图板上的一页，在其中可以绘制任意图形，浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。
HTML5 Canvas 基础
创建 canvas 的方法非常简单，只需在 HTML 页面中添加<canvas> 元素：
<canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas>
为了能在 JavaScript 中引用元素，最好给元素设置 ID；也需要给 canvas 设定高度和宽度，创建好画布后，接下来准备画笔，要在画布中绘制图形需要使用 JavaScript，首先通过getElementById 函数找到 canvas 元素，然后初始化上下文，之后可以使用上下文 API 绘制各种图形，下面的脚本在 canvas 中绘制一个矩形：
// 获取元素引用 var elem = document.getElementById('myCanvas'); // 确保属性和方法存在，以防止在其它浏览器中代码出错 if (elem && elem.getContext) { // 获取 2D 上下文 var context = elem.getContext('2d'); if (context) { // 完成！现在你可以开始绘制第一个矩形 // 你只需要提供 (x,y) 坐标，以及宽度和高度尺寸 context.fillRect(0, 0, 150, 100); } }可以将上述代码放置在文档头部或外部文件中。
2D context API
基本线条
上面的例子展示了如何绘制矩形，通过fillStyle 和strokeStyle 属性可以轻松设置矩形的填充和线条颜色，颜色值使用方法与 CSS 相同：十六进制数、rgb()、rgba() 和 hsla()（若浏览器支持，如 Opera10 和 Firefox3），通过fillRect 可以绘制带填充的矩形，使用strokeRect 可以绘制只有边框没有填充的矩形，如果想清除部分 canvas 可以使用clearRect，上述三个方法的参数相同：x, y, width, height，前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度，可以使用lineWidth 属性改变线条粗细，以下是使用了fillRect,strokeRect,clearRect 等的例子：
context.fillStyle = '#00f'; // blue context.strokeStyle = '#f00'; // red context.lineWidth = 4; // 绘制一些矩形 context.fillRect(0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect(30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);
路径
通过 canvas 路径（path）可以绘制任意形状，可以先绘制轮廓，然后绘制边框和填充，创建自定义形状很简单，使用beginPath() 开始绘制，然后使用直线、曲线等图形绘制你的图形，绘制完毕后调用fill 和stroke 即可添加填充或者设置边框，调用closePath() 结束自定义图形绘制，以下是一个绘制三角形的例子：
// 设置样式属性 context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; context.beginPath(); // 从左上角点开始 context.moveTo(10, 10); // 给出 (x,y) 坐标 context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); // 完成！现在填充形状并绘制边框 context.fill(); context.stroke(); context.closePath();
插入图像
drawImage 方法允许在 canvas 中插入其他图像（img 和 canvas 元素），此方法比较复杂，可以有 3 个、5 个或 9 个参数：
3个参数：最基本的drawImage 使用方法，一个参数指定图像位置，另两个参数设置图像在 canvas 中的位置。
5个参数：中级的drawImage 使用方法，包括上面所述的 3 个参数，加两个参数指明插入图像的宽度和高度（如果你想改变图像大小）。
9个参数：最复杂的drawImage 使用方法，包含上述 5 个参数外，4 个参数设置源图像中的位置和高度宽度，这些参数允许你在显示图像前动态裁剪源图像。
以下是三个使用方法的例子：
// Three arguments: the element, destination (x,y) coordinates. context.drawImage(img_elem, dx, dy); // Five arguments: the element, destination (x,y) coordinates, and destination width and height. context.drawImage(img_elem, dx, dy, dw, dh); // Nine arguments: the most complex drawImage usage, including source position and size. context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);
HTML5 Canvas 常见问题解答（FAQs）
问题一：如何在 canvas 上绘制文字？
回答： 在 canvas 上绘制文字可以使用fillText 或strokeText 方法，首先设置字体大小和字体样式，然后设置文字颜色，最后调用相应的方法绘制文字。
// 设置文字大小和字体 context.font = "30px Microsoft Yahei"; // 设置文字颜色 context.strokeStyle = "#ffcc2a"; // 绘制文字内容和位置 context.fillText("Hello World", 100, 100);问题二：如何实现渐变效果？
回答： 渐变效果可以通过创建线性渐变或径向渐变对象来实现，创建一个线性渐变对象并应用到矩形上：
// 创建线性渐变对象 var gradient = context.createLinearGradient(0, 0, 150, 0); gradient.addColorStop(0, "red"); gradient.addColorStop(1, "blue"); // 设置填充样式为渐变对象 context.fillStyle = gradient; // 绘制矩形 context.fillRect(10, 10, 150, 100);
通过以上步骤，可以在 canvas 上实现丰富的渐变效果。
HTML5 Canvas 基本语法
1. 创建 Canvas 元素
要在 HTML 页面中创建一个 Canvas，你需要使用<canvas> 标签，以下是一个简单的例子：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
id：Canvas 的唯一标识符，用于 JavaScript 脚本中的引用。
width 和height：Canvas 的宽度和高度，单位为像素。
style：可以添加 CSS 样式来美化 Canvas。
2. 获取 Canvas 上下文
在 JavaScript 中，你可以通过getElementById 方法获取 Canvas 元素，然后通过调用getContext 方法来获取绘图上下文（通常是2d）：
var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');3. 绘图命令
Canvas 上下文（ctx）提供了一系列绘图方法，以下是一些常用的绘图命令：
线条绘制：
```javascript
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();
```
矩形绘制：
```javascript
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, width, height);
// 或者使用 stroke 方法绘制边框
ctx.strokeRect(x, y, width, height);
```
圆形绘制：
```javascript
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, antiClockwise);
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.stroke();
```
文本绘制：
```javascript
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', x, y);
```
图像绘制：
```javascript
var img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y, width, height);
};
img.src = 'image.png';
```
4. 事件处理
Canvas 也支持事件处理，例如鼠标点击和移动：
canvas.addEventListener('mousemove', function(e) { var rect = canvas.getBoundingClientRect(); var x = e.clientX rect.left; var y = e.clientY rect.top; // 在此处处理鼠标移动逻辑 });5. 清除画布
要清除画布，可以使用ctx.clearRect(x, y, width, height) 方法：
ctx.clearRect(0, 0, canvas.width, canvas.height);
6. 转换
Canvas 提供了多种转换方法，如缩放、旋转和移动：
ctx.scale(scaleX, scaleY); ctx.rotate(angleInRadians); ctx.translate(tx, ty);
7. 保存和恢复状态
Canvas 提供了保存和恢复绘图状态的方法：
ctx.save(); // 保存当前状态 // ...执行一系列操作 ctx.restore(); // 恢复之前保存的状态
通过以上基本语法，你可以开始在 HTML5 Canvas 上进行绘图和动画制作。
