canvas简介
一些数据可视化框架的底层都用到了canvas。canvas是html5的新特性,允许我们使用canvas在网页中通过js绘制图像。
canvas标签只是一个图形容器(具有默认大小300*150),相当于一个画布,canvas本身是没有绘图能力的,绘图工作是在js内部完成。
也就是说,js相当于画笔,而canvas是画布。
注:1、在浏览器中,canvas标签就是一张图片。
2、在给canvas标签添加文本内容也不显示,因为操作canvas(比如绘制图像/文字)的方法只能通过js完成。
3、不能通过css样式设置画布的宽高,只能在标签内部通过width与height属性设置canvas的宽高。
canvas的基本使用
<body>
<!-- canvas画布 具有默认的长与宽 300*150-->
<canvas width="600px" height="300px"></canvas>
</body>
获取canvas节点
let canvas = document.querySelector('canvas');
获取画笔(上下文)
//通过canvas的getcontext方法获取画笔
let ctx = canvas.getContext('2d');
ctx画笔提供了很多属性与方法绘制图形:
canvas画布有自己的坐标系,左上角是原点,向右是x正方向,向下是y正方向。
绘制线段
moveTo()
设置线段起点。
lineTo()
设置其他点。起点只有一个,而其他点可以有多个。
stroke()
用于绘制线条。不调用这个方法看不到线段。
closePath
将起点与终点连接在一起。
这里展示绘制一个三角形:
let canvas = document.querySelector('canvas');
//通过canvas的getcontext方法获取画笔
let ctx = canvas.getContext('2d');
// console.log(ctx);
//绘制线段:设置线段起点
ctx.moveTo(100,100);
//其他点的设置
ctx.lineTo(100,200);
ctx.lineTo(300,100);
ctx.closePath();
//设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
//stroke方法绘制线条
ctx.stroke();
设置线段颜色,添加如下代码:
//设置线段颜色
ctx.strokeStyle = 'blue';
ctx.lineWidth = '20'; //线段宽度
效果
绘制矩形
有两种方法:
- 没有填充颜色。 使用
strokeRect
方法。 - 有填充颜色。使用
fillRect
方法。(这里注意更换颜色要写在绘制图形之前)
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
//绘制矩形第一种方式 无填充颜色的矩形
//第一个参数 x 矩形距离canvas左边界的距离
//第二个参数y 矩形距离canvas上边界的距离
//第三个参数是矩形的宽 第四个参数是矩形的高
ctx.strokeRect(100,100,100,200);
//第二种方式 带有填充颜色的矩形
//可以更换填充的颜色
ctx.fillStyle = 'skyblue';
ctx.fill();
//更换颜色要写在绘制图形之前
ctx.fillRect(200,200,100,200);
实现效果:
绘制圆
绘制圆形之前调用beginPath
方法。
通过arc
方法绘制圆形。
注:1、arc
方法有六个参数:x,y,r,起始弧度,结束弧度(如果绘制整个圆,这个值就是2PI),是否逆时针绘制。
2、也可以使用fillStyle
方法填充圆的颜色。
3、绘制圆形之后调用stroke
方法
4、绘制第二个圆的时候,要重新调用beginPath
方法。
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
//绘制圆形
//开始绘制
ctx.beginPath();
//绘制圆形 x,y,r,起始弧度,结束弧度2pai,是否逆时针绘制
ctx.arc(100,100,50,0,2*Math.PI,true);
//填充颜色
ctx.fillStyle = 'red';
ctx.fill();
//绘制第二个圆 顺时针绘制
ctx.beginPath();
ctx.arc(200,200,30,0,1,false);
ctx.fillStyle = 'skyblue';
ctx.fill();
ctx.stroke();
实现效果:
清除画布与绘制文字
清除画布clearRect
方法。
绘制文字fillText
方法。
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
//绘制矩形
ctx.fillRect(100,200,100,200);
//清除画布 x,y,w,h
ctx.clearRect(0,0,600,400);
//设置文字大小
ctx.font = "20px 微软雅黑";
ctx.fillStyle = 'red';
//绘制文字
ctx.fillText('数据可视化',50,20)
清除前:
清除后:(清除600*400区域,然后绘制文字)
绘制柱状图
绘制柱状图主要是绘制文字、线段、矩形的结合。
这里比较繁琐,需要计算柱子的开始位置与结束位置,在实际工作中通常使用echarts等工具来进行图表绘制。
这里展示一下练习的代码:
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//设置字体大小
ctx.font = '20px 微软雅黑';
//绘制文本
ctx.fillText('数据可视化',50,50);
//绘制线段
ctx.moveTo(100,100);
ctx.lineTo(100,400);
ctx.lineTo(700,400);
//绘制其他线段
ctx.moveTo(100,100);
ctx.lineTo(700,100);
ctx.fillText('150',60,110);
ctx.moveTo(100,160);
ctx.lineTo(700,160);
ctx.fillText('120',60,170);
ctx.moveTo(100,220);
ctx.lineTo(700,220);
ctx.fillText('90',60,230);
ctx.moveTo(100,280);
ctx.lineTo(700,280);
ctx.fillText('60',60,290);
ctx.moveTo(100,340);
ctx.lineTo(700,340);
ctx.fillText('30',60,350);
ctx.fillText('0',70,410);
//绘制水平轴底部线段 600/4 = 150
ctx.moveTo(250,400);
ctx.lineTo(250,410);
//底部文字
ctx.fillText('食品',150,423);
ctx.moveTo(400,400);
ctx.lineTo(400,410);
//底部文字
ctx.fillText('数码',300,423);
ctx.moveTo(550,400);
ctx.lineTo(550,410);
//底部文字
ctx.fillText('服饰',450,423);
ctx.moveTo(700,400);
ctx.lineTo(700,410);
//底部文字
ctx.fillText('箱包',600,423);
ctx.lineTo
ctx.stroke();
//绘制矩形
ctx.fillRect(125,200,100,200)
实现效果: