数据可视化

cancvs

基本概念

1. H5新增特性，双闭合标签，元素在网页上用js绘制图像。只是图形容器，相当于一个画布
2. 默认宽高是300*150
3. 浏览器认为cancvs是一张图片
4. 给cancvs画布添加文本内容是不生效的
5. 给cancvs标签添加子节点是没有意义的
6. cancvs标签必须指定高度，宽高必须通过标签的属性（width、height）来设置，不能通过样式进行设置
7. 想在cancvs画布中绘制图形、显示文字都必须通过js完成，通过js的“笔”来完成。

基本使用

cancvs在html是一个标签，在js中获取到的是一个对象

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

// 获取canvas标签
let canvas = document.querySelector('canvas');
// 获取canvas的笔（上下文）
let ctx = canvas.getContext('2d');
// ctx是一个对象，身上有很多属性和方法供我们操作canvas

//绘制线段
// 控制线段的起点的设置
ctx.moveTo(100, 100)
//其他点的设置，可以有多个
ctx.lineTo(100, 200)
ctx.lineTo(100, 200)
// 设置起点和最终的结束点连接在一起
ctx.closePath()
// 设置图像的填充的颜色
ctx.fillStyle = "red"
ctx.fill()
// 设置图像边框的颜色
ctx.strokeStyle = "green"
// 设置图像边框的宽度
ctx.lineWidth = "20"
// stroke方法绘制线段
ctx.stroke()

// 绘制矩形
// 第一种方式：绘制线段矩形  ctx.strokeRect(矩形距离x轴的距离, 矩形距离y轴的距离, 矩形的宽, 矩形的高)
ctx.strokeRect(100, 200, 100, 200)
// 第二种方式：填充颜色的矩形，默认是黑色，用fillStyle、fill更改颜色，要放在绘制矩形的前面
ctx.fillStyle = "yellow"  //定义设置的是什么颜色
ctx.fill()   //开始填充颜色
ctx.fillRect(300, 200, 100, 200)

// 绘制圆形
// 开始绘制圆
ctx.beginPath();
// 绘制圆形的方法 arc(圆心距离x轴的距离,圆心距离y轴的距离,圆的半径，起始的弧度，结束的弧度，是否逆时针绘制(逆时针true，顺指针false))
// 360°=2*PI*弧度
ctx.arc(100,100,50,0,2*Math.PI,true)
// 绘制圆
ctx.stroke()

API

(一) 方法:

getContext(“2d”) 创建绘图对象

beginPath(); 开始绘制路径

closePath(); 结束绘制路径,闭合线框

moveTo(x,y); 移动到绘制起点

lineTo(x,y); 画线段到指定点

arc(x,y,r,start,end); 绘制圆形(弧度单位)

quadraticCurveTo(x,y,endX,endY) 二次贝塞尔曲线

bezierCurveTo(x1,y1,x2,y2,endX,endY) 三次贝塞尔曲线

stroke(); 线条类型

fill(); 填充类型

fillRect(x,y,w,h) 填充矩形

strokeRect(x,y,w,h) 线框矩形

clearRect(x,y,w,h) 清除矩形

strokeText(string,x,y) 绘制线条文字(空心)

fillText(string,x,y) 绘制填充文字(实心)

drawImage(img,x,y,width,height) 绘制图片(需在img的load函数中)

save() 保存当前状态设定

restore() 恢复到保存之前的状态设定

rotate() 旋转画布角度(弧度制)

(二) 属性:

fillStyle 填充颜色(支持rgb(),#fff,red)

strokeStyle 线条颜色

lineWidth 线条宽度(整数值,默认单位px)

lineJoin 折线拐角类型 (round表示圆角)

font 支持多个值, 例如"10px 宋体"

textBaseline 文字基点(默认bottom坐下为基准点, top为左上)

globalCompositeOperation 绘制合成(具体值参考附件)