对于实现折线图效果的示例，可以按照以下步骤进行：
步骤一：创建HTML页面
将canvas元素嵌入到HTML页面中，并且设置该元素的宽度和高度，为画布渲染做好准备。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制折线图效果</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
</body>
</html>
步骤二：创建JS脚本
第一步创建了HTML页面布局，下一步是实现JS脚本，使用HTML5的Canvas创建画布，并在画布上绘制折线图。JS可以按如下步骤展开：
- 获取HTML中的canvas元素并在js中使用它。
javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
- 为画布设置参数，包括线条宽度、线条颜色和边缘样式。
javascript
ctx.lineWidth = 2;
ctx.strokeStyle = '#333';
ctx.lineCap = 'round';
- 创建数据集合并绘制到画布上。数据点可以在数组中以坐标对的形式传递，随后循环遍历这个数组并且将这些坐标对转换为画布上的坐标。
```javascript
let data = [
{ x: 0, y: 110 },
{ x: 40, y: 50 },
{ x: 80, y: 60 },
{ x: 120, y: 80 },
{ x: 160, y: 100 },
{ x: 200, y: 200 },
{ x: 240, y: 160 },
{ x: 280, y: 150 }
];
//绘制折线图的函数
function drawLine(chartData) {
ctx.beginPath();
ctx.moveTo(chartData[0].x, chartData[0].y);
for (let i = 1; i < chartData.length; i++) {
ctx.lineTo(chartData[i].x, chartData[i].y);
}
ctx.stroke();
}
drawLine(data);
```
此时，折线图就已经绘制完成了，可以运行脚本，查看绘制的效果。
示例说明一
下面的示例说明中，我们将会实现在鼠标点击生成数据，并且通过canvas对数据进行可视化的效果。实现方法如下：
- 在绑定鼠标点击事件时，需要先清空上一次绘制的画布内容。
javascript
canvas.addEventListener('click', function (e) {
data.push({ x: e.layerX, y: e.layerY });
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLine(data);
});
- 清空画布已经使用过的函数是
clearRect()，该函数清空给定矩形内的指定像素。
数据集的长度增加，画布中的折线图也随之扩张。
示例说明二
下面的示例说明中，我们将在折线图上增加点显示和提示框。实现方法如下：
- 增加提示框，平移当前坐标系到指定X、Y坐标，并添加单独的背景色、边框和文字颜色。
```javascript
function drawTooltip(x, y, text) {
let fontSize = 14;
let padding = 4;
let valueWidth = ctx.measureText(text).width;
let boxWidth = valueWidth + padding * 2;
let boxHeight = fontSize + padding * 2;
ctx.save();
ctx.beginPath();
ctx.fillStyle = "#333";
ctx.fillRect(x, y - boxHeight, boxWidth, boxHeight);
ctx.strokeStyle = "#333";
ctx.strokeRect(x, y - boxHeight, boxWidth, boxHeight);
ctx.font = "bold " + fontSize + "px sans-serif";
ctx.fillStyle = "#FFF";
ctx.fillText(text, x + padding, y - padding);
ctx.restore();
}
```
- 在所有数据点中遍历并绘制点。
javascript
for (let i = 0; i < data.length; i++) {
ctx.fillStyle = "#FFF";
ctx.beginPath();
ctx.arc(data[i].x, data[i].y, 3, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = "#333";
ctx.stroke();
}
- 展示提示框。
javascript
canvas.addEventListener('mousemove', function (e) {
for (let i = 0; i < data.length; i++) {
var dx = data[i].x - e.clientX + canvas.getBoundingClientRect().left;
var dy = data[i].y - e.clientY + canvas.getBoundingClientRect().top;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
drawTooltip(e.clientX - canvas.getBoundingClientRect().left + 10, e.clientY - canvas.getBoundingClientRect().top, data[i].x + ":" + data[i].y);
}
}
});
此时，折线图就具备了点和提示框的效果，同样通过鼠标hover或者click来查看每一个数据点的对应位置。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+html5 canvas实现的简单绘制折线图效果示例 - Python技术站
微信扫一扫 
支付宝扫一扫 