一、认识Canvas
一个canvas Api学习网站：https://www.canvasapi.cn/
1.什么是canvas
canvas是一个Html标签，可以使用一系列js语法绘制图形
例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。
它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。
2.canvas基本用法
1.canvas元素
html
<canvas id="cvs" width="150" height="150"></canvas><canvas>看起来和<img>元素很相像，<canvas>标签只有两个属性可选属性width和height。canvas默认宽高都为0
2.替换内容
可以在canvas标签中添加其他内容，若浏览器不知此canvas，则会显示标签里的内容
html
<canvas id="cvs" width="150" height="150">
您的浏览器不支持canvas
</canvas>
<canvas id="cvs" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>3.结束标签不可省
与 img元素不同，canvas 元素需要结束标签 (</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。
如果不需要替代内容，一个简单的<canvas id="foo" ...></canvas>在所有支持 canvas 的浏览器中都是完全兼容的。
4.渲染上下文
调用canvas元素的getContext()方法，即可获取渲染上下文，getContext()可传入以下几个参数
- '2d'：创建一个CanvasRenderingContext2D的二维渲染上下文
- 'webgl'：创建一个WebGLRenderingContext的三维渲染上下文，在实现了WebGl版本1的浏览器上可用
- 'webgl2'：创建一个WebGL2RenderingContext的三维渲染上下文，在实现了WebGl版本2的浏览器上可用
目前只需要学习二维渲染上下文
以后绘制各种图形都是通过这个渲染上下文绘制
js
// 获取画布
var canvas = document.getElementById('cvs');
// 获取画笔
var ctx = canvas.getContext('2d');5.检查支持性
替换内容是用于在不支持<canvas>标签的浏览器中展示的。通过简单的测试 getContext() 方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
javascript
var canvas = document.getElementById('cvs');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}6.模板骨架
这里的是一个最简单的canvas模板
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas=document.querySelector('#canvas')
const ctx=canvas.getContext('2d')
function createHDCanvas(canvas, w, h) {
const ratio = window.devicePixelRatio || 1;
canvas.width = w * ratio; // 实际渲染像素
canvas.height = h * ratio; // 实际渲染像素
canvas.style.width = `${w}px`; // 控制显示大小
canvas.style.height = `${h}px`; // 控制显示大小
const ctx = canvas.getContext("2d");
ctx.scale(ratio, ratio);
// canvas 绘制
return canvas;
}
createHDCanvas(canvas, window.innerWidth, window.innerHeight);
window.onresize = () => {
createHDCanvas(canvas, window.innerWidth, window.innerHeight);
};
</script>
</body>
</html>7.第三方canvas库
包含200+canvas三方库：awesome-canvas