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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM