快速上手canvas

什么是Canvase

Canvas 是 HTML5 中的一个重要特性，它允许你使用 JavaScript 在网页上动态绘制图形。Canvas 通过 JavaScript 来控制，在 HTML 页面中创建一个画布元素 <canvas>，然后使用 JavaScript 中的 Canvas API 来进行绘制。

用法

绘制过程通常包括以下几个步骤：

1.创建 Canvas 元素： 在 HTML 页面中添加 <canvas> 元素，并设置它的宽度和高度，以确定绘制区域的大小。

<canvas id="myCanvas" width="500" height="300"></canvas>

2.获取 Canvas 上下文： 使用 JavaScript 获取 Canvas 元素的上下文（context），通常是 2D 。Canvas API 提供了 getContext() 方法来获取上下文对象。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 获取 2D 上下文

3.绘制图形： 使用 Canvas 上下文提供的绘制方法来绘制图形，如直线、矩形、圆形、文本等。Canvas API 中包含了丰富的绘制方法，可以满足各种绘制需求。

// 绘制矩形
ctx.fillStyle = 'red'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 100); // 绘制一个宽高为 100x100 的红色矩形，起始坐标为 (50, 50)

4.更新图形：如果需要实现动画效果或动态更新，可以通过更新图形属性或清除画布来实现。Canvas 提供了清除画布的方法 clearRect()。

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布

5.绘制图片： Canvas 还可以绘制图片，可以通过 drawImage() 方法将图片绘制到画布上。

const img = new Image();
img.src = 'image.png';
img.onload = function() {ctx.drawImage(img, 0, 0); // 在 (0, 0) 位置绘制图片
}

注意

<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。

如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 <canvas> 的宽高。

与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。