效果圖：
重難點：
1、畫布左上角的頂點的坐標為（0 ，0），右下角的坐標最大，與平常思維相反
2、數據的處理
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script src = "recordPaint.js"></script>
<style>
canvas{
width:600px;
height:600px;
border:1px solid #ddd;
background:#eee;
display:block;
margin:40px auto;
}
</style>
</head>
<script>
window.onload = function(){
//十二個月對應的y軸數據
var datas = [1200,2000,3000,500,200,800,1800,2200,2600,1000,600,300];
//獲取畫布DOM
var recordCvs = document.getElementById("recordCvs");
//調用繪制畫布函數
recordPaint(recordCvs,datas);
}
</script>
<body>
<div id="recordContent">
<canvas id="recordCvs" width = "600" height = "400">
您的瀏覽器不支持canvas
</canvas>
</div>
</body>
</html>
recordPaint.js對應代碼：
recordPaint = function (elem, datas) {
//1.創建畫布對象
var context = elem.getContext('2d');
//2、獲取畫布的寬度和高度
const WIDTH = elem.width;
const HEIGHT = elem.height;
//定義坐標軸相對於畫布的內邊距
var padding = 20;//初始化內邊距
var paddingLeft = 50;// 至少大於繪制文字的寬度
var paddingBottom = 30;// 至少大於繪制文字的高度
// 4、定義繪制坐標軸的關鍵點的坐標值
var axisY = { // y軸的起點坐標值
x: paddingLeft,
y: padding
};
var origin = { // 原點坐標值（x軸與y軸交叉點）
x: paddingLeft,
y: HEIGHT - paddingBottom
};
var axisX = { // X軸的起點坐標值
x: WIDTH - padding,
y: HEIGHT - paddingBottom
};
//繪制坐標軸
context.beginPath();
context.moveTo(axisY.x, axisY.y);
context.lineTo(origin.x, origin.y);
context.lineTo(axisX.x, axisX.y);
context.stroke();
//繪制坐標軸的箭頭
context.beginPath();
context.moveTo(axisY.x - 5, axisY.y + 10);
context.lineTo(axisY.x, axisY.y);
context.lineTo(axisY.x + 5, axisY.y + 10);
context.stroke();
context.beginPath();
context.moveTo(axisX.x - 10, axisX.y - 5);
context.lineTo(axisX.x, axisX.y);
context.lineTo(axisX.x - 10, axisX.y + 5);
context.stroke();
//存儲x軸的值
var pointsX = [];
//7、繪制坐標軸的刻度（x軸的月份和y軸的金額）
//x軸的月份
var month = {
x: paddingLeft,
y: HEIGHT - paddingBottom + 5
};
for (var i = 1; i <= 12; i++) {
context.textBaseline = "top";
context.fillText(i + "月", month.x, month.y);
pointsX.push(month.x);
month.x += (axisX.x - origin.x) / 12;
}
//繪制y軸的金額
//從眾多的關鍵金額中，渠道最高金額
var max = Math.max.apply(Math, datas);
var moneyY = (origin.y - axisY.y) / (max / 500 + 1);
var money = {
x: axisY.x - 5,
y: axisY.y + moneyY,
jin: max
};
//遍歷最高值/間隔
context.textAlign = "right";
for (var i = 0; i < max / 500; i++) {
context.fillText(money.jin + "元", money.x, money.y);
money.y += moneyY;
money.jin -= 500;
}
//繪制折線
context.beginPath();
for (let i = 0; i < datas.length; i++) {
//x軸的坐標
let pointX = pointsX[i];
//y軸的坐標
let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
if (i === 0) {
// context.textBaseline = "";
context.textAlign = "left"
context.moveTo(pointX, pointY);
} else {
context.textBaseline = "bottom";
context.textAlign = "center"
context.lineTo(pointX, pointY);
}
//繪制錢
context.fillText(datas[i], pointX, pointY);
}
context.stroke();
//繪制小圓點
for(let i = 0; i < datas.length; i++){
//x軸的坐標
let pointX = pointsX[i];
//y軸的坐標
let pointY = origin.y - (origin.y - (axisY.y + moneyY)) * datas[i] / max;
context.fillStyle = "#aa0000";
context.beginPath();
context.arc(pointX,pointY,3,0,2*Math.PI);
context.fill();
}
};