一.canvas 简介

1.1 什么是 canvas?

Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码能够拜访该区域，相似于其余通用的二维 API，通过一套残缺的绘图函数来动静生成图形。

二.canvas 绘图

2.1canvas 标签

2.1.1 canvas 标签语法和属性

• 标签名 canvas，须要进行闭合。就是一一般的 html 标签。
• 能够设置 width 和 height 属性，然而属性值 单位必须是 px，否则疏忽。

• 留神：

  • 不要用 CSS 管制它的宽和高, 会走出图片拉伸，
  • 从新设置 canvas 标签的宽高属性会让画布擦除所有的内容。
  • 能够给 canvas 画布设置背景色

2.1.2 浏览器兼容性问题

• ie9 以上才反对 canvas, 其余古代浏览器等都反对
• 挪动端的兼容状况很好，根本全副都可应用
• 2d 的反对的都十分好，3d（webgl）ie11 才反对，其余都反对
• 如果浏览器不兼容，最好进行提醒

例如：<canvas id="canvasDemo">
 若浏览器显示此行文本，则该浏览器不反对 canvas。</canvas>

2.2 绘图上下文 context

• Canvas 会创立一个固定大小的画布，会公开一个或多个 渲染上下文 (画笔)，应用 渲染上下文 来绘制和解决要展现的内容。
• Canvas 本身无奈绘制任何内容。Canvas 的绘图是应用 JavaScript 操作的。
• Context 对象就是 JavaScript 操作 Canvas 的接口。

let canvas = document.getElementById('canvasDemo'); // 取得画布（canvsa 标签）let ctx = canvas.getContext('2d'); 

2.3 门路绘制

2.3.1canvas 坐标系

而在 canvas 的坐标体系中, 是以左上角为坐标原点，向右为 x 轴正方向，向下为 y 轴正方向

2.3.2 绘制终点

* 语法：ctx.moveTo(x, y);
* 解释：设置上下文绘制门路的终点。相当于挪动画笔到某个地位
* 参数：x,y 都是绝对于 canvas 盒子的最左上角的地位坐标。* 留神：** 绘制线段前必须先设置终点。**

2.3.3 绘制直线

* 语法：ctx.lineTo(x2, y2);
* 解释：从 x2,y2 的地位绘制一条直线到终点或者上一个线头点。* 参数：x2,y2 线头点坐标。

2.3.4 门路开始和闭合

* 开始门路：ctx.beginPath();
* 闭合门路：ctx.closePath();
* 解释：如果是绘制不同状态的线段或者形态，必须应用开始新门路的办法把不同的绘制操作隔开。闭合门路会主动把最初的线头和开始的线头连在一起。* beginPath: 外围的作用是将 不同绘制的形态进行隔离，每次执行此办法，示意从新绘制一个门路, 跟之前的绘制的墨迹能够进行离开款式设置和治理。

2.3.5 描边(stroke)

* 语法：ctx.stroke();
* 解释：依据门路绘制线。门路只是草稿，没有理论画进去，真正绘制线必须执行 stroke

• canvas 绘制的根本步骤小结：

  • 第一步：取得上下文 =>canvasElem.getContext(‘2d’);
  • 第二步：开始门路布局 =>ctx.beginPath()
  • 第三步：挪动起始点 =>ctx.moveTo(x, y)
  • 第四步：绘制线 =>ctx.lineTo(x, y)
  • 第五步：闭合门路 =>ctx.closePath();
  • 第六步：绘制描边 =>ctx.stroke();

html 局部：

<canvas id="canvasDemo"> 若浏览器显示此行文本，则该浏览器不反对 canvas。</canvas>

javascript 局部：

//=============== 根本绘制 api====================
// 取得画布
let canvas = document.querySelector('#canvasDemo');
let ctx = canvas.getContext('2d'); // 取得上下文
canvas.width = 900; // 设置标签的属性宽高
canvas.height = 600; // 设置标签的属性宽高
canvas.style.border = '1px solid #000';
// 绘制三角形
ctx.beginPath(); // 开始门路
ctx.moveTo(100, 100); // 三角形，左顶点
ctx.lineTo(300, 100); // 右顶点
ctx.lineTo(300, 300); // 底部的点
ctx.closePath(); // 完结门路
ctx.stroke(); // 描边门路

2.3.7 填充(fill)

* 语法：ctx.fill();
* 解释：填充，是将闭合的门路的内容填充具体的色彩。默认彩色。* 例：填充红色 ctx.fillStyle="red";// 也可填 8 位色彩码 #FF0000
 ctx.fill(); 

2.3.4 疾速创立（rect()）、描边 (strokeRect())、填充(fillRect())、革除(fillRect()) 矩形

* 创立语法：ctx.rect(x, y, width, height);
* 解释：x, y 是矩形左上角坐标，width 和 height 都是以像素计
* rect 办法只是布局了矩形的门路，并没有填充和描边。* 描边语法：ctx.strokeRect(x, y, width, height);
 - 参数跟创立语法雷同，留神此办法绘制完门路后立刻进行 stroke 绘制
* 语法：ctx.fillRect(x, y, width, height);
 - 参数跟创立语法雷同，此办法执行实现后。立刻对以后矩形进行 fill 填充。* 革除语法：ctx.clearRect(x, y, width, hegiht);
* 解释：革除某个矩形内的绘制的内容，相当于橡皮擦。

2.4 绘制圆形（arc()）

语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
解释：- x,y：圆心坐标。- r：半径大小。- sAngle: 绘制开始的角度。圆心到最左边点是 0 度，顺时针方向弧度增大。- eAngel: 完结的角度，留神是弧度。counterclockwise：是否是逆时针。true 是逆时针，false：顺时针 - 弧度和角度的转换公式：rad = deg*Math.PI/180;

2.5 绘制文字

* ctx.fillText()      在画布上绘制“被填充的”文本
* ctx.strokeText()    在画布上绘制文本（无填充）* ctx.measureText()   返回蕴含指定文本宽度的对象
// 设置字体
ctx.font = "18px bold 黑体";
// 设置色彩
ctx.fillStyle = "#f00";
// 设置程度对齐形式
ctx.textAlign = "center";
// 设置垂直对齐形式
ctx.textBaseline = "middle";
// 绘制文字（参数：要写的字，x 坐标，y 坐标）ctx.fillText("要写的文字", 100, 100);

2.6 图像变换

2.6.1 缩放

scale() 办法缩放以后绘图，更大或更小
语法：ctx.scale(scalewidth,scaleheight)
scalewidth : 缩放以后绘图的宽度 (1=100%, 0.5=50%, 2=200%, 顺次类推)
scaleheight : 缩放以后绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) + 留神：缩放的是整个画布，缩放后，持续绘制的图形会被放大或放大，之前绘制的图形不会有变动。

2.6.2 位移画布

ctx.translate(x,y) 办法从新映射画布上的 (0,0) 地位
参数阐明：x：增加到程度坐标（x）上的值
y：增加到垂直坐标（y）上的值
产生位移后，相当于把画布的 0,0 坐标 更换到新的 x,y 的地位，之前绘制的图形不会有变动。

2.6.3 旋转

• context.rotate(angle); 办法旋转以后的绘图
• 留神参数是弧度（PI）
• 如需将角度转换为弧度，请应用 degrees*Math.PI/180 公式进行计算。

2.6.4 绘制环境的保留和欢送

• ctx.save() 保留以后环境的状态

  • 能够把以后绘制环境进行保留到缓存中。
• ctx.restore() 返回之前保留过的门路状态和属性

3.canvas 框架

3.1 框架简介

canvas 的框架很多，而且偏重不同，

比方 Three.js 是有名的 3D 框架，d3.js 偏重于数据展现。

框架名称

畛域

挪动端

文档

github

其余

ThreeJS

3D

反对

全

https://github.com/mrdoob/three.js

弱小的绘图引擎

playCanvas

3D

反对

全，有中文

游戏引擎，提供了一个可视化的编辑工具 playCanvas Editor

Egret

2D+3D

反对

全，有中文

https://github.com/egret-labs/egret-core

国产，多端游戏引擎

PixiJS

2D

反对

全

https://github.com/pixijs/pixi-particles

WebGL 引擎

Fabric.js

2D

–

全

https://github.com/fabricjs/fabric.js

KONVA

2D

全

https://github.com/konvajs/konva

有专门的 vue 和 react 版本

spritejs

2D

全，有中文

https://github.com/spritejs/spritejs

跨平台的高性能图形系统，它可能反对 web、node、桌面利用和小程序的图形绘制和实现各种动画成果。有 vue 版本

​

3.2spritejs 学习

3.2.1 个性

• 像操作 DOM 对象一样操作画布上的图形元素
• WebGL2 渲染
• 多图层解决图形、文本、图像渲染
• DOM 事件代理、自定义事件派发~~~~
• 应用 ES6+ 语法和面向对象编程
• OffscreenCanvas 和 Web Worker 多线程渲染
• 结构化对象树，对 d3 引擎敌对，可能无缝应用
• 服务端渲染
• Vue

3.2.2 架构

SpriteJS Next 提供若干类根底精灵元素，能够像操作 DOM 元素一样在图层上操作它们。