前言
课件地址
课前准备
1.安装live-server，用于启服务，安装方法 npm i -g live-server
2.需掌握es6、html、css 的基础知识。
3.非必须准备：三角函数。
课堂目标
1.对canvas 的概念有一个整体认知
2.理解canvas 的绘图方式
知识点
1.canvas 的概念
2.canvas 上下文对象的概念
3.canvas 的兼容性
canvas 的概念
1- 我们为什么要学canvas？
以前我们用div+css 可以绘制矩形、圆角矩形、圆形、或者椭圆形，可是若想绘制三角形、五角形，或者异形，那就很难了。
因此，这个时候我们就需要使用canvas 绘图。
我们可以使用canvas 绘制复杂图形，做动画，处理图像，开发游戏，处理视频…
这时候，会svg的小伙伴可能会说，用svg也可以绘制上面的形状。
svg与canvas 确实有着很多共通之处，很多项目可以用SVG 开发，也可以用canvas 开发。
但svg与canvas的差异也挺大的：
- svg，是矢量图形，缩放不失真；支持鼠标事件，选择方便；不适合图形数量较大的场景。
- canvas，是位图，缩放失真；鼠标事件只能通过canvas 接收，其内部图形无法接收；适合图像数量较大的场景。
注：当canvas 图像数量和图像的计算量太大的时候，也会卡，这时候便可以选择WebGL，因为WebGL 有GPU 加速。
2-canvas 是什么？
- 广义：h5 新增canvas 2d 绘图功能
- 在html 中: canvas 是html 标签，可以理解为一张画布。我们需要用js 在canvas 里绘制图形。
3-如何设置canvas 的尺寸？
设置canvas 的 width、height 属性：
<canvas id="canvas" width="700" height="800">
也可用js 设置：
const canvas=document.getElementById('canvas');
canvas.width=300;
canvas.height=150;
注：不要使用css 设置canvas 尺寸，除非想要调整图像清晰度。
canvas 上下文对象
1-canvas 上下文对象是什么？
如果说canvas 是画布，那么canvas 上下文对象就是画笔。
2-如何获取canvas 上下文对象？
获取上下文对象的方法：canvas.getContext(‘2d’)
//画布
const canvas=document.getElementById('canvas');
//画笔
const ctx=canvas.getContext('2d');
3-获取了上下文对象后，如何用它画画？
使用画笔在canvas 上画画，要考虑三个方面：
- 颜色
- 形状
- 绘图方法
如，绘制一个红色的矩形：
<canvas id="canvas" width="700" height="800">
不兼容
</canvas>
<script>
//画布
const canvas=document.getElementById('canvas');
//画笔
const ctx=canvas.getContext('2d');
//填充色
ctx.fillStyle='red';
//绘制填充矩形
ctx.fillRect(
20,20,
400,200
)
</script>
效果如下：
canvas 兼容性
canvas 兼容ie9 及其以上
注意事项
canvas 的尺寸不能过大。
canvas 的尺寸尽量控制在4000 以内。
canvas 尺寸的极限值因浏览器、平台不同而不同。
canvas 在不同浏览器和平台上的极限值：
-
Chrome:
- Maximum height/width: 32,767 pixels
- Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
-
Firefox:
- Maximum height/width: 32,767 pixels
- Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
-
IE:
- Maximum height/width: 8,192 pixels
- Maximum area: N/A
-
IE Mobile and WeiXin:
- Maximum height/width: 4,096 pixels
- Maximum area: N/A
总结
canvas 绘图的步骤：
1.建立canvas 画布。
2.通过canvas 画布获取上下文对象，也就是画笔。
3.设置画笔颜色。
4.设置图形形状。
5.绘制图形。
