HTML5 画布"重磅"知识点

碎碎念

使用 canvas>元素不是非常难但你需要一些基本的HTML和JavaScript知识。最基础的反而是最重磅的；所有需求的实现大致方向都是建立在你的基础知识上的思考；盖房子都是要有稳固的地基；…好了，严肃点，进入正题，我们开始讲混凝土的构成…

画布可以做什么

canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

画布的由来

canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 canvas 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

体验画布

Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。

1. 设置画布宽为600，高为400。准备绘制工具，利用工具绘图

 <canvas id="myCan" width="400" height="600"></canvas>

2. 获取上下文，绘制工具箱

let cxt = myCan.getContext('2d')

3. 移动画笔，设置起点

cxt.moveTo(0,0)

4. 绘制直线 (轨迹，绘制路径)

cxt.lineTo(400,600)

5. 描边

cxt.stroke()

总结延伸知识点

1. 画布的坐标系是以左上角为原点，向右为X轴，向下为Y轴
2. 默认宽高是300*150,但是尽量不要使用CSS重新定义

该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为canvas明确规定宽高，而不是使用CSS。

3. getContext(‘2d’),暂时没有3d
   (WebGL (Web图形库) 是一种JavaScript API](https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API)
   web gl 绘制3d效果的网页技术
4. stroke()是描边，fill()是填充

1px像素模糊现象

绘制两条平行线

线条默认的宽度是1px；默认颜色是黑色

    cxt.moveTo(10,10)
    cxt.lineTo(10,200)

    cxt.moveTo(90,10)
    cxt.lineTo(90,200)

模糊

当我们放大的时候，更容易看到线条是模糊，可能会认为反正正常显示看起来正常；但是放到移动端？或则有些人是像素眼…

1. 产生的原因
   对齐的点是中心线的位置，会把1px的线分成两个0.5px；即绘制的线条会从路径的中央向两端扩展。但是计算机不会只绘制1px(0.5-1.5)这一个像素，它会把0-0.5和1.5-2之间的内容会被更浅颜色的内容填充，一共是2px会被填充，即原来按照中心线对齐的1px,接着是延展出去的左右0.5px
   
2. 解决
   让绘制的路径起点从一个像素的中心开始，那么当向两端扩展的时候，恰好填满一个像素。

    cxt.moveTo(10.5,10)
    cxt.lineTo(10.5,200)

    cxt.moveTo(90.5,10)
    cxt.lineTo(90.5,200)

绘制

先通过绘制，来对画布一些API和画布有一个基本的了解

绘制三角形

    let myCan = document.getElementById('myCan')
    let cxt = myCan.getContext('2d')
    cxt.moveTo(50,10)
    cxt.lineTo(70,10)
    cxt.lineTo(50,60)
    cxt.stroke()

1. 起始点和lineTo的结束点无法完全闭合缺角
2. 解决1：在给一条线cxt.lineTo(50,10)
3. 解决2：闭合路径cxt.closePath()

绘制虚线

setLineDash()方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。

    let cxt = myCan.getContext('2d')
    cxt.moveTo(60,60)
    cxt.lineTo(205,60)
    cxt.setLineDash([20])
    cxt.stroke()

getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。(获取虚线的排列方式 获取的是不重复的那一段的排列方式)

console.log(cxt.getLineDash())

lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性。正值是向后偏移；负值是向前偏移。这里我们设置向后偏移20

cxt.lineDashOffset = 20

绘制渐变的矩形(点是由线构成原理)

    var myCan = document.querySelector('#myCan')
    var cxt = myCan.getContext('2d')
    cxt.lineWidth = 40
    for (