Canvas学习笔记

 

系统性学习文章推荐：

https://www.w3cplus.com/canvas/introduction-to-prepare.html

随堂练习代码github地址：https://github.com/yotoyoung/yotoyoung/tree/master/demo/canvas

 

1、Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域，使用脚本(通常为JavaScript)在其中绘制图像。

2、应用场景：照片集，制作动画，进行实时视频处理和渲染。

3、<canvas> 只有两个可选的属性 ：width、heigth 属性，不设置widht、height属性时，则默认 width为300、height为150,单位都是px。

也可以使用css属性来设置宽高，但是如果和初始比例不一致，会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

4、使用Canvas处理图像和声音时，检验整个页面是否已经加载，并且开始操作前是否所有HTML元素都已展现，window.onload事件。

 

canvas的使用：

HTML或者JS定义可绘制区域：

 

 

在脚本中使用

引用canvas的dom对象并获取2d或3d环境，可以通过HTML5 Canvas中的一些API进行一些操作。

 

环境对象：

 

绘图：

* 矩形：canvas只支持一种原生的图形绘制：矩形。所有其他图形都至少需要生成一种路径(path)。

* 对矩形的三种操作：绘制一个实体矩形；绘制一个框架矩形；清除指定的矩形区域，这块区域会变的完全透明

* rect：矩形； fill：填充；stroke：描边；clear：清除

 

路径：

图形的基本元素是路径。

通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

​ 一个路径，甚至一个子路径，都是闭合的。

 

使用路径绘制图步骤：

1、创建路径起始点，路径一旦创建成功，图形绘制命令被指向到路径上生成路径。

beginPath()

2、画笔起始点，把画笔移动到指定的坐标(x, y)，该点就是新的子路径的起始点。该方法并不会从当前路径中清除任何子路径。

moveTo(x, y)

3、绘制路径，调用绘制方法去绘制出路径,比如绘制一条直线

lineTo(x, y)

3、把路径封闭，创建从当前点回到起始点的路径，图形绘制命令又重新指向到上下文中。

如果当前的绘制路径是打开的，则关闭掉该绘制路径。此外，调用该方法时，它会尝试用直线边接当前端点与起始端点来关闭路径，但如果图形已经关闭（比如先调用stroke()）或者只有一个点，它会什么都不做。

具体参照：

https://www.w3cplus.com/canvas/draw-lines.html

closePath()

4、一旦路径描述完，通过描边或填充路径区域来渲染图形，给图形增加样式，如填充颜色或者线条粗细等。

stroke()/fill()

 

线段连接样式：

miterlimit只有当lineJoin为miter时才会有效。

miterLimit指的是，当使用miter作为线条和线条相接的方式时，所 产生的内角和外角的距离的最大值

默认值是10就代表最大值是10px，一旦超过来10px就会使用bevel的方式显示。

 

arc：

 

 

能被save的和不能被save的：

在Canvas环境中绘图时，可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

• 当前的坐标变换（变换矩阵）信息，比如旋转或平移时使用的rotate()和setTransform()方法
• 当前剪贴区域
• 图形上下文对象（CanvasRenderingContext2D）的当前属性值

 

坐标变换：影响到所有后续的绘图操作。

translate：根据当前的原点坐标进行平移。

rotate：根据当前坐标角度进行旋转

scale：通过对坐标系的放大，图被放大，画布大小没变

对于任何形状的中心怎么来寻找：

只要在缩放、旋转或者组合旋转缩放前将原点平移到形状的中心，都可以得到想要的效果。记住，任何形状的中心点都是半宽的x值和半高的y值。这需要使用边界框理论找到中心点。