設置畫布對象
canvas id="myCanvas" ref="canvas"
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas") ? document.getElementById("myCanvas") : this.$refs.canvas;
console.log(canvas,this.$refs.canvas)
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//注意，Canvas的坐標系是：Canvas畫布的左上角為原點(0,0)，向右為橫坐標，向下為縱坐標，單位是像素(px)。
//開始一個新的繪制路徑
ctx.beginPath();
//定義直線的起點坐標為(10,10)
ctx.moveTo(10, 10);
//定義直線的終點坐標為(50,10)
ctx.lineTo(5, 50);
ctx.lineTo(200, 100);
// 圖形填充色
// canvas.fillStyle="#FFFFFF"
// ctx.fill();
// 線條的顏色
ctx.lineWidth=1;
ctx.strokeStyle="#FFFFFF";
//沿着坐標點順序的路徑繪制直線
ctx.stroke();
// //關閉當前的繪制路徑
ctx.closePath();
}