可视化相关知识（canvas）

可视化基础

可视化领域区分

canvas

1. 绘制过程
   准备container => 画布选中和初始化（明确画布尺寸）=> 利用api去做绘制

<!--container-->
<canvas id="canvas">请升级浏览器以兼容canvas</canvas>

//选中画布
const shapeCanvas = document.getElementById('shapeCanvas');

2. canvas相关API

//1. 路径的绘制
ctx.beginPath //开始绘制路径
ctx.moveTo(x, y) //设置起点
ctx.lineTo(x, y) //绘制一条支线到(x,y)点
ctx.closePath //闭合图形
ctx.stroke //对路径进行着色
ctx.fill //对路径进行填充

//2.闭合矩形区域的绘制
ctx.rect(x, y, width, height) //绘制矩形路径
ctx.strokeRect(x, y, width, height) //绘制矩形
ctx.fillRect(x, y, width, height) //绘制填充矩形
ctx.clearRect(x, y, width, height) //清除矩形区域

//3.曲线的绘制
ctx.arc(x, y, radius, start, end, anticlockwise) //绘制圆形或扇形

//4.文本绘制
strokeText(string, x, y) //绘制空心文字
fillText(string, x, y) //绘制实心文字

//5.填充阴影
shadowOffsetX //阴影水平位移
shadowOffsetY //阴影垂直位置
shadowBlur //模糊度
shadowColor //阴影的颜色

//6.记忆处理
save //保存上下文环境
restore //恢复上一次保存的上下文环境

可视化实例

当前主要形式：

分析分类：