【前端数据可视化】canvas 基础指令
canvas
canvas 是 HTML5 的新特性,它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。
canvas标签
<canvas>标签只是图形容器,相当于一个画布,canvas元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成,相当于使用画笔在画布上画画。
注意:必须指定宽高
<canvas id="charts" width="800" height="400"></canvas>
getContext()
context是一个封装了很多绘图功能的对象,我们在页面中创建一个canvas 标签之后,首先要使用 getContext() 获取 canvas的上下文环境,目前getContext() 的参数只有 2d,暂时还不支持 3d
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');
绘制线段
- moveTo(x, y):把路径移动到画布中的指定点,不创建线条
- lineTo(x, y):添加一个新点,然后在画布中创建从该点到最后指定点的线条
context.strokeStyle = 'yellowgreen';
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1px solid black; } </style> </head> <body> <!-- canvas画布:是HTML5中新增的一个特性,双闭合标签 --> <!-- canvas标签默认宽度与高度 300 * 150 --> <!-- 浏览器认为canvas标签是一张图片 --> <!-- 给canvas画布添加文本内容没有任何意义 --> <!-- 给canvas标签添加子节点没有任何意义的 --> <!-- 你想操作canvas画布:画布当中绘制图形、显示一个文字,都必须通过JS完成 --> <!-- canvas标签的w|h务必通过canvas标签属性width|height设置 --> <!-- 切记不能通过样式去设置画布的宽度与高度 --> <canvas width="600" height="400"></canvas> </body> </html> <script> //canvas标签任何操作务必通过JS完成 //通过JS当中"笔"去完成 let canvas = document.querySelector('canvas'); //获取画布的笔【上下文】 let ctx = canvas.getContext('2d'); //绘制线段:绘制线段的起点的设置 ctx.moveTo(100,100); //其他点的设置:可以有多个 ctx.lineTo(100,200); ctx.lineTo(200,100); //设置图形的填充的颜色 ctx.fillStyle = "red"; ctx.fill(); //设置线段的颜色与宽度 ctx.strokeStyle = "purple"; ctx.lineWidth="20" //可以设置起点与最终的结束点连接在一起 ctx.closePath(); //stroke方法绘制线段 ctx.stroke(); </script>
绘制矩形
- fillRect(x, y, width, height) 绘制填充颜色的矩形
- strokeRect(x, y, width, height) 绘制线条的矩形
context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0px } canvas{ border:1px solid black; } </style> </head> <body> <canvas width="600" height="400"></canvas> </body> </html> <script> //获取DOM节点 let canvas = document.querySelector('canvas'); //获取上下文 let ctx = canvas.getContext('2d'); //绘制矩形第一种方式:参数为x、y、w、h //这种的矩形没有办法设置填充颜色 ctx.strokeRect(100,200,100,200); //第二种方式绘制矩形 //填充颜色可以替换 //绘制图形之前设置填充颜色 ctx.fillStyle = 'skyblue'; ctx.fill(); ctx.fillRect(300,200,100,200); </script>
绘制圆形
- arc(x, y, radius, starAngle, endAngle, anticlockwise)
- x : 圆心的 x 坐标
- y:圆心的 y 坐标
- radius : 半径
- starAngle :开始角度
- endAngle:结束角度
- anticlockwise :是否逆时针(true)为逆时针,(false)为顺时针
context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
// 或
// context.stroke(); // 此时就会有问题
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid black; } </style> </head> <body> <canvas width="600" height="400"></canvas> </body> </html> <script> //获取DOM let canvas = document.querySelector('canvas'); //获取上下文 let ctx = canvas.getContext('2d'); //绘制圆形 ctx.beginPath(); //绘制圆形的方法:x、y,r,起始弧度、结束的弧度,是否逆时针绘制 ctx.arc(100,100,50,0,2 * Math.PI,true); //设置填充颜色 ctx.fillStyle = 'red'; ctx.fill(); //绘制圆形 ctx.stroke(); //绘制一个元 ctx.beginPath(); ctx.arc(200,200,50,0,1,true); ctx.stroke(); </script>
清除路径
清除绘画的路径,多个图形就不会连接在一起
context.beginPath()
context.closePath()
清除矩形区域
当在一个画布反复绘制图形,需要将上一次的图形清空
- clearRext(x, y, width, height)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0 ; padding: 0; } canvas{ border: 1px solid black; } </style> </head> <body> <!-- 画布的宽度与高度通过属性设置,千万别通过样式去设置 --> <canvas width="600" height="400"></canvas> </body> </html> <script> //获取节点 let canvas = document.querySelector('canvas'); //获取上下文-笔 let ctx = canvas.getContext('2d'); //绘制矩形 ctx.fillRect(100,200,100,200); //清除画布-整个画布被清除 //ctx.clearRect(0,0,600,400); //清除部分画布 ctx.clearRect(100,200,50,100); //设置文字大小 ctx.font="20px 微软雅黑"; ctx.fillStyle ='red'; //绘制文字 ctx.fillText("数据可视化",50,20); </script>
绘制文字
- fillText(text, x, y, maxWidth)
案例:绘制一个柱状图
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } canvas{ border: 1px solid red; } </style> </head> <body> <canvas width="800" height="420"></canvas> </body> </html> <script> //获取节点 let canvas = document.querySelector('canvas'); //获取上下文 let ctx = canvas.getContext('2d'); //绘制文本--左上角的文本 ctx.font="16px 微软雅黑"; ctx.fillText('数据可视化',50,80); //绘制线段 ctx.moveTo(100,100); ctx.lineTo(100,400); ctx.lineTo(700,400); ctx.stroke(); //绘制其他的线段 ctx.moveTo(100,100); ctx.lineTo(700,100); ctx.fillText('150',70,110); ctx.moveTo(100,160); ctx.lineTo(700,160); ctx.fillText('120',70,170); ctx.moveTo(100,220); ctx.lineTo(700,220); ctx.fillText('90',70,230); ctx.moveTo(100,280); ctx.lineTo(700,280); ctx.fillText('60',70,290); ctx.moveTo(100,340); ctx.lineTo(700,340); ctx.fillText('30',70,350); ctx.fillText('0',70,400); ctx.stroke(); //绘制水平轴底部的线段 ctx.moveTo(250,400); ctx.lineTo(250,410); //底部的文字 ctx.fillText('食品',170,415); ctx.moveTo(400,400); ctx.lineTo(400,410); ctx.fillText('数码',310,415); ctx.moveTo(550,400); ctx.lineTo(550,410); ctx.fillText('服饰',450,415); ctx.fillText('箱包',600,415); ctx.stroke(); //绘制矩形 ctx.fillStyle = 'red'; ctx.fillRect(120,200,100,200) </script>
洗尽铅华始见金,褪去浮华归本真