使用HTML5 Canvas绘制直线或折线等线条的方法讲解

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  

您的浏览器不支持canvas标签。   

</canvas>  

<script type="text/javascript">  

//获取Canvas对象(画布)   

var canvas = document.getElementById("myCanvas");   

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   

if(canvas.getContext){     

    //获取对应的CanvasRenderingContext2D对象(画笔)   

    var ctx = canvas.getContext("2d");     

    //开始一个新的绘制路径   

    ctx.beginPath();   

    //定义直线的起点坐标为(10,10)   

    ctx.moveTo(10, 10);   

    //定义直线的终点坐标为(50,10)   

    ctx.lineTo(50, 10);   

    //沿着坐标点顺序的路径绘制直线   

    ctx.stroke();   

    //关闭当前的绘制路径   

    ctx.closePath();   

    //绘制一条带颜色的直线   

    ctx.moveTo(10, 30);   

    ctx.lineTo(50, 30);   

    //支持css颜色值的各种表现形式，例如："blue"、"#0000ff"、"#00f"、"rgb(0,0,255)"、"rgba(0,0,255,1)"   

    //颜色等各种设置，必须在最终的绘制函数stroke()之前调用   

    ctx.strokeStyle = "blue";    

    ctx.stroke();   

    //关闭当前的绘制路径   

    ctx.closePath();   

}   

</script>  

</body>  

</html>  

对应的显示效果如下图：

使用canvas绘制基本的折线

当我们掌握了Canvas绘制直线之后，绘制折线等其他形式的线条就简单多了。我们只需要多绘制几个路径中间点，并依次将它们连接起来即可。

JavaScript Code复制内容到剪贴板

<script type="text/javascript">   

//获取Canvas对象(画布)   

var canvas = document.getElementById("myCanvas");   

//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   

if(canvas.getContext){     

    //获取对应的CanvasRenderingContext2D对象(画笔)   

    var ctx = canvas.getContext("2d");     

    //开始一个新的绘制路径   

    ctx.beginPath();   

    //设置线条颜色为蓝色   

    ctx.strokeStyle = "blue";   

    //设置路径起点坐标   

    ctx.moveTo(20, 50);   

    //定义中间点坐标1   

    ctx.lineTo(60, 50);   

    //定义中间点坐标2   

    ctx.lineTo(60, 90);   

    //定义中间点坐标3(这是最后一个中间点，也就是终点)   

    ctx.lineTo(100, 90);   

    //按照绘制路径顺序连接各个坐标点   

    ctx.stroke();   

    //关闭绘制路径   

    ctx.closePath();   

}   

</script>  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!