Canvas可视化开发技术知识点总结

Canvas简介

Canvas是HTML5新推出的绘图组件，类似于一个布局于页面上的画布，通过构建画笔，给画笔添加粗细，颜色，实现绘制路径、图形、字符等功能。

Canvas基础组成

Canvas上下文环境Context

Canvas是画布，Context是接口，JavaScript是操作，JavaScript并不能直接操作Canvas。JavaScript是通过Context接口实现对Canvas的操作。

（Context也可称为画笔）

//并不是创建画布，而是判断当前浏览器是否支持canvas
canvas.getContext();

//2D画布使用"2d",3D画布则使用"WebGL"
canvas.getContext("2d");

Canvas路径

坐标系

canvas的坐标系是一个平面直角坐标系，坐标系原点在canvas标签的左上角，向右为X轴的正方向，向下为Y轴的正方向。

路径绘制流程

开启路径：beginPath();

绘制起点：moveTo(x,y);

绘制线条：lineTo(x,y);

绘制终点：closePath();

综上，绘制一条简单的线条主要要经过如下步骤：

//创建画布
let canvasItem = document.getElementById("画布组件的id");
let canvas = canvasItem.getContext("2d");

//开启路径,绘制线条，关闭路径
canvas.beginPath();
canvas.moveTo(0,0);
canvas.lineTo(10,10);
canvas.lineTo(0,10);
canvas.clothPath();

//路径描边
canas.stroke();

注意：绘制完路径后，实际上画布并没有视觉上的内容，路径需要进行描边后方可显示。

Canvas的快速绘制

绘制矩形

//创建画布
let canvasItem = document.getElementById("画布组件的id");
let canvas = canvasItem.getContext("2d");

//绘制矩形,weight和height单位都是px
canvas.rect(x, y, width, height);

//快速绘制描边矩形
canvas.strokeRect(x, y, width, height);

其中，描边矩形绘制完会自动进行描边，但是普通的rect()只会绘制路径。

矩形快速消除：

//当前矩形区域内的内容清空
canvas.clearRect(x, y, width, hegiht);

绘制圆形

//用于绘制圆形或者半圆
//sAngle:绘制开始的角度；eAngel:结束的角度；counterclockwise：是否是逆时针。
canvas.arc(x,y,r,sAngle,eAngle,counterclockwise);

绘制文字

//先设置字体样式
ctx.fillStyle = 'red';
ctx.font = '16px "微软雅黑"';
ctx.textBaseline = 'bottom';
ctx.textAlign = 'left';

两种绘制文字的方式：

//绘制文字，描边并填充
canvas.strokeText( "left", 100, 200 );
//仅绘制文字
canvas.fillText('Top-g', 100, 200);

Canvas的各类功能

样式的存储和复原

//将当前的样式保存到内存中
canvas.save();
//将之前的保存的样式进行复原
canvas.restore();

转换方式	说明
translate(x,y)	移动参考画布(0,0)
scale(x%,y%)	对画布内容进行缩放
rotate(弧度)	旋转参考画布(0,0)

总结

canvas绘制流程一般为：

创建上下文环境，即画笔（getContext）-->开启路径（beginPath）-->选定路径起点（moveTo）-->选择路径经过的点（lineTo）-->选择路径渲染方式（fill 或 stroke）-->结束路径（closePath）-->渲染（stroke）