canvas 画一条折线

设置画布对象

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();
}