HTML画布————Canvas(1)

之前决定每周都要发一篇博客，来记录一下自己的学习情况，但是最近都在看网上的Vue.js的教程，实在是不知道写什么好，看了看上次写的关于Canvas的部分太少，那么今天就来补充一下。
立一个flag，以后每周都要发一篇博客！！

1、认识canvas元素
1.1、在页面中添加canvas元素
如果要向页面中添加一个canvas，可以直接如下图所示添加。默认情况，会产生一个宽300像素，高150像素的矩形。

这样只是简单的创建了一个canvas对象，在浏览器页面上打开时什么都不会显示，可以使用标准的CSS属性来为它添加样式，这样就可以看到创建出来的canvas元素

1.2如何绘制图画
canvas本身是并不能实现图形绘制功能，绘图工作需要由JavaScript来完成，在canvas中绘制图形的具体步骤如下
第一步，在页面中添加canvas时必须添加id属性，以便接下来的调用。
第二步，使用id寻找canvas元素，在JavaScript中使用document.getElementById等方法利用先前定义的id来寻找canvas。
第三步，通过getContext创建context对象，以获取允许进行绘制的2d环境
第四步，使用JavaScript进行绘制
如图全部代码，绘制了一个矩形

1.3认识canvas坐标
绘制矩形时，fillRect(50,25,100,50)前两个参数就是用于指定x轴和y轴的坐标值，才canvas中，坐标原点位于canvas的左上角，原点(0,0)，x轴水平向右延伸，y轴垂直向下延伸。

1.4何时不用canvas
虽然canvas元素可以实现非常强大的功能，但是如果HTML页面中有比canvas元素更加适合的元素存在，则不必使用canvas。例如，渲染HTML页面的标题样式标签时，就不太合适。

1.5检测浏览器支持
判断getContext是否存在以此来检测浏览器是否支持canvas元素，如果不支持可以在canvas元素内插入替换内容。

2、绘制简单的图形
2.1绘制直线
绘制直线时调用了三个方法：moveTo、lineTo、stroke

moveTo用于建立新的子路径，规定起始点为(x,y)
lineTo方法用于从moveTo方法规定的起始点开始绘制一条到规定坐标的直线，上图中，lineTo绘制了一条从(0,0)到(400,200)的直线
上面的两个方法规定了直线路径的起点和终点，而stroke方法用于沿该路径绘制一条直线。

2.2绘制矩形

使用filStyle或strokeStyle指定颜色时，只要是符合CSS标准的颜色值都可以

2.3绘制圆形

beginPath();用于开始绘制路径，closePath();用于结束绘制路径，在两个语句用使用arc方法绘制圆形。
arc的本意是用来绘制弧形，采用适当的参数后就可以绘制出圆形。
closePath();方法会在路径不闭合时，补上一条线将路径闭合起来。

可以尝试添加和不添加closePath();看看绘制出来的图形是什么样子。

2.4绘制三角形

绘制空心三角形时只需要把fill改为stroke即可。

2.5清空画布

使用clearRect方法清除指定的矩形区域内的所有图形

3、图形的变化
3.1保存与恢复canvas状态
canvas状态值得是当前画面的所有样式、变形和裁切的一个快照。使用save和restore方法用于保存和恢复canvas状态，这两个方法都不需要任何参数。

可以将 canCon.restore();删除，看看有什么效果。

3.2移动坐标位置
使用translate(dx,dy)方法移动坐标空间，使矩形发生水平和垂直方向上的偏移
3.3旋转坐标空间
使用rotate(angle)方法用于以原点为中心旋转canvas，实质仍是旋转canvas上下文对象的坐标空间
画布的坐标空间默认以画布左上角(0,0)为原点！
3.4缩放图形
scale(x,y)方法用于增减canvas上下文对象中的像素数目，从而实现图形或位图的放大或者缩小
x,y位必须要接受的参数，且值必须为正值，如果需要放大图案，将参数值设置大于1，如果要缩小图案，将参数设置小于1，当值等于1时，图形没有任何变化。

效果如下图所示：

3.5矩形转化
transform方法用于直接对变形矩阵作修改，即进行矩阵变换，矩阵变化常用于坐标变化不能达到预期效果的情况，能够实现比普通坐标变换更为复杂的变形。
前面所说的移动、缩放、旋转。这三种方法其实都是矩阵变换的特例。
transfrom(m11,m12,m21,m22,dx,dy)
m11 m12 dx
m21 m22 dy
0 0 1
初始坐标为xy，x’y’是矩阵变换之后得到的新坐标
x’=(m11)x+(m12)y+dx
y’=(m21)x+(m22)y+dy
具体原理参考高数中有关矩阵乘法的知识。

关于canvas的相关知识还有
4、图形的组合与裁切
4.1图形的组合
4.2裁切路径
5、更多的颜色和样式选项
5.1应用不同的线型
5.2绘制线型渐变
5.3绘制径向渐变
5.4绘制图案
5.5绘制图形的透明度
5.6创建阴影
6、绘制文字
6.1绘制填充文字
6.2绘制轮廓文字
6.3测量文字宽度
7、操作与使用图像
7.1向canvas中引入图像
7.2改变图像大小
7.3创建图像切片

等下次在详述

(话说一边写代码一边写文字还是挺费时间的，两个半小时才写了这么一点东西。)
关于canvas设置宽高中还是有些问题，总感觉有缩放存在，画直线那里宽高(300,150)和(400,200)对于直线(0,0)到(300,150)的图像画出来是一样的，都是一条完整的对角线，不知道是哪里的问题。还有最后一个图案，感觉有缩放的存在，设置宽高(700,500)是可以放下整个图案的，但是实际效果不可以，当我把宽高设置为浏览器同步时，图案明显就变小了。
这些问题我接下来再看看，如果有谁知道为什么麻烦给我说一声，毕竟现在仍然处于小白一名。谢谢大家了