canvas 是 html5 支持的一個標(biāo)簽纠拔，用于圖形的繪制乾颁。canvas 標(biāo)簽僅僅提供了圖形的容器，必須通過 js 腳本來繪制催享。
比如，繪制一個簡單的矩形：
矩形.png
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
這里就不做入門普及了哟绊，可直接搜索相關(guān) API 查看因妙。
比如，我要做一個折線的效果：
lineCanvas.png
首先票髓，獲取到畫布的上下文攀涵，getContext("2d")；
然后洽沟，根據(jù)要顯示的數(shù)值以故，調(diào)用上下文的 lineTo() 方法畫出一條條的線，這些線連接起來就形成了趨勢線的效果裆操，
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>mycanvas</title>
</head>
<body>
<div>
<h2>line canvas</h2>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
window.onload = function () {
var arr = [40, 50, 30, 70, 80, 40, 90, 60, 80, 60, 69, 80, 80, 40, 50, 30, 70, 80, 40, 77, 80, 70, 60, 50, 80];
drawLine.minCurve(arr);
}
var drawLine = {};
!function () {
//求數(shù)組最大值
Array.prototype.max = function () {
var max = this[0];
var len = this.length;
for (var i = 1; i < len; i++) {
if (this[i] > max) {
max = this[i];
}
}
return max;
}
function draw(arr) {
var width = 300, height = 200;
var maxV = arr.max();
//計(jì)算y軸增量
var yStep = height / maxV;
console.log(maxV);
var domCan = document.getElementById("myCanvas");
var context = domCan.getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#395B73";
//context.moveTo(0, 0);//開始畫圖的位置
var x_space = width / (arr.length - 1);//水平點(diǎn)的間隙像素
//context.lineTo(15, 60); x表示水平向右延伸怒详，y表示垂直高度位置，從畫板最左上角(0,0)開始計(jì)算坐標(biāo)
var xLen = 0;
for (var i = 0; i < arr.length; i++) {
var yValue = arr[i];//縱坐標(biāo)值
xLen += x_space;
var yPont = height - yValue * yStep;
if (i == 0) {
xLen = 0;
}
var m = xLen + "," + yPont;
console.log(m);
context.lineTo(xLen, yPont);
}
context.stroke();
context.closePath();
}
drawLine.minCurve = draw;
}();
</script>
</body>
</html>
下面來個組合練習(xí)踪区，我要實(shí)現(xiàn)動態(tài)的效果昆烁，就是折線是動態(tài)生成的；這個也不難缎岗，就是設(shè)置一個定時器静尼，一段一段觸發(fā)就行了；那么，咱們再增加一點(diǎn)難度鼠渺，我要同時展示 4 個趨勢折線蜗元，4 個折線都與時間關(guān)聯(lián)，也就是同一個時間點(diǎn)顯示 4 組不同的數(shù)據(jù)系冗，同時奕扣，還要支持時間段的切換，比如 1 分鐘和 10 分鐘不同的時間段掌敬；像下面這樣：
canvas.gif
你可以嘗試自己實(shí)現(xiàn)一下惯豆，這里提供一個前端的實(shí)現(xiàn)參考，前端代碼下載奔害。
