效果：
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>坐標系繪制</title> </head> <body> <canvas id="canvas"></canvas> <script> (function () { //canvas布局 var canvas = document.getElementById("canvas"); canvas.width = 600; canvas.height = 600; canvas.style.border = "1px solid red"; //獲取上下文 var ctx = canvas.getContext("2d"); //繪制坐標軸 var x0 = 100,y0 = 500;// xy軸原點 var maxX = 500,maxY = 100; var lineWidth = 10;//箭頭寬度 //x軸 ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(maxX,y0); ctx.lineTo(maxX-lineWidth,y0+lineWidth); ctx.moveTo(maxX,y0); ctx.lineTo(maxX-lineWidth,y0-lineWidth); ctx.stroke(); //y軸 ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x0,maxY); ctx.lineTo(x0-lineWidth,maxY+lineWidth); ctx.lineTo(x0,maxY); ctx.lineTo(x0+lineWidth,maxY+lineWidth); ctx.stroke(); //折線 var data = [.5,.4,.6,.8,.7,.9,.3]; var xWidht = 400/(data.length+1);//x軸間距 ctx.beginPath(); for(var i = 0;i<data.length;i++){ ctx.lineTo(100+xWidht*(i+1),500-400*data[i]); } ctx.strokeStyle = 'blue'; ctx.stroke(); }()) </script> </body> </html>