一、canvas介绍(https://www.w3school.com.cn/html5/html5_ref_canvas.asp)
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
二、canvas绘图
<html>
<head>
<title>canvas绘图</title>
</head>
<body>
<canvas id='canvas' width="800" height="800"></canvas>
<script type="text/javascript">
//获取dom
var canvas=document.getElementById('canvas')
//获取2d绘图上下文
var pen=canvas.getContext('2d')
pen.fillStyle="#FF0000";
pen.strokeStyle="white";
pen.strokeRect(0,0,200,200)
//绘制一个线条
pen.strokeStyle="blue";
pen.moveTo(50,50)
pen.lineTo(400,400)
pen.stroke()
//绘制一个圆
pen.strokeStyle="green";
pen.beginPath()
pen.arc(200,200,100,0,2*Math.PI)
pen.stroke()
//绘制文本
// pen.strokrStyle='yellow'
pen.font="30px Arial";
pen.fillText("Hello World",200,50)
pen.strokeText('你好，世界',200,100)
//创建线条渐变
var grd=pen.createLinearGradient(400,400,800,800)
grd.addColorStop(0,'black')
grd.addColorStop(1,'white')
pen.fillStyle=grd
pen.fillRect(400,400,800,800)
//创建径向渐变
var grd1=pen.createRadialGradient(175,50,10,175,50,100)
grd1.addColorStop(0,"red");
grd1.addColorStop(1,"white");
// 填充渐变
pen.fillStyle=grd1;
pen.fillRect(0,0,150,100);
//绘制一个坐标系
pen.strokeStyle='blue'
pen.font="12px Arial";
//绘制柱状图
pen.fillStyle='green'
//绘制x轴
pen.moveTo(50,750)
pen.lineTo(400,750)
pen.lineTo(390,755)
pen.moveTo(400,750)
pen.lineTo(390,745)
pen.fillText('x(姓名)',400,750)
//绘制y轴
pen.moveTo(50,750)
pen.lineTo(50,600)
pen.lineTo(55,605)
pen.moveTo(50,600)
pen.lineTo(45,605)
pen.fillText('y(数量)',50,600)
//原点
pen.fillText('0',40,760)
//x轴刻度
for(var i=0;i<(400-90)/40;i+=1){
let number=Math.floor(0-Math.random()*100)
pen.fillRect(50+40*i+20,750,20,number)
pen.fillText(-number,50+40*i+20,745+number)
pen.fillText('张三',50+40*i+20,765)
// pen.fillRect(50+60,750,20,-80)
// pen.fillRect(50+100,750,20,-80)
}
//y轴刻度i
for(var i=10;i<750-600;i+=10){
pen.moveTo(50,750-i)
if(i%100==0){
pen.lineTo(55,750-i)
pen.fillText(i,30,750-i)
}else{
pen.lineTo(52,750-i)
}
}
pen.stroke()
</script>
</body>
</html>
结果如下：
图片.png
三、canvas绘制图例
canvas绘制图例也很简单，就是绘制文字，绘制方块这类的，但是会出现一个问题就是绘制的图形文字比较模糊，这时候需要算一个比例系数
1.创建canvas，并创建样式
<canvas id="canvas" width="280" height="400"></canvas>
#canvas {
position: relative;
z-index: 999999;
width: 140px;
height: 200px;
left: 85%;
bottom: 250px;
background-color: #fbfff8;
}
2.图例内容
legend: [
{
name: "低地草甸类",
color: "#00BFBF"
},
{
name: "山地草甸类",
color: "#00E254"
},
{
name: "暖性灌草丛类",
color: "#1CFF00"
},
{
name: "温性草原类",
color: "#AAFF00"
},
{
name: "温性荒漠类",
color: "#FFE200"
},
{
name: "热性灌草丛类",
color: "#FF9B00"
},
{
name: "高寒草原类",
color: "#C67F38"
},
{
name: "高寒荒漠类",
color: "#724F2B"
}
],
3.绘制图例
drawLegend() {
//绘制图例
let canvas = document.getElementById("canvas");
let pen = canvas.getContext("2d");
pen.font = "30px cursive";
pen.fillText("图例", 100, 40);
pen.font = "25px cursive";
//绘制文字和图块
for (let i = 0; i < this.legend.length; i++) {
pen.fillStyle = this.legend[i].color;
pen.fillRect(20, 40 * i + 60, 60, 20);
pen.fillStyle = "black";
pen.fillText(this.legend[i].name, 100, 40 * i + 80);
}
}
4.结果如下
图片.png
需要注意的时canvas的width和height跟css中的width和height时不一样的，这儿是两倍的关系，如果一样就会导致模糊，而且绘制的时候文字图块的宽高都是以canvas的width和height为参考（非css）
当然也可以通过计算的方式获取scale，然后在绘制的时候乘上在这个比例系数就可以
参考代码如下：
// img为用于展示canvas绘图结果的img元素
const img = document.querySelector('#img');
// 创建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const width = 400;
const height = 800;
// 设置canvas的css宽高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
// 获取缩放比
const ratio = window.devicePixelRatio || 1;
// 设置canvas的宽高
canvas.width = width * ratio;
canvas.height = height * ratio;
... // 在canvas中绘图
img.src = canvas.toDataURL("image/png");
网友评论