如何用canvas来绘制线条-

这次给大家带来如何用canvas来绘制线条，用canvas来绘制线条的注意事项是什么，下面就是实战案例，一起来看一下。 这次给大家带来如何用canvas来绘制线条，用canvas来绘制线条的注意事项是什么，下面就是实战案例，一起来看一下。

canvas是html5的一个新标签， 标签只是图形容器，您必需运用足原来绘制图形。
接下来，我们运用canvas来绘制线条。
第一，创建html文件，并在文件中增加canvas标签，如下所示。

    
    
    当会员阅读器不支撑Canvas,请改换阅读器重试！

若阅读器不支撑canvas标签，则canvas标签内的字体味显示，个别状况下，显示canvas内的绘画。
此刻，让我们开端画一条线。
第一，得到canvas：

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

canvas的宽和高个别不在style内设定，可以在canvas和id统一品级内设定，如上面html内所示，或者运用js设定。

canvas.width=1014;
 canvas.height=768;

下来，得到画图的高低文环境

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

我们个别都是运用context来操纵canvas，下来，我们在代码里概括学习一下：

        var context = canvas.getContext("2d");//得到画图的高低文环境
        context.beginPath();//开端绘制线条，若不运用beginPath，则不克不及绘制多条线条
        context.moveTo(100, 100);//线条开端位置
        context.lineTo(700, 700);//线条经过点
        context.lineTo(100, 700);
        context.lineTo(100, 100);
        context.closePath();//完毕绘制线条，不是必需的
       
        context.lineWidth = 5;//设定线条宽度
        context.strokeStyle = "red";//设定线条色彩
        context.stroke();//用于绘制线条
        context.beginPath();
        context.moveTo(200, 100);
        context.lineTo(700, 600);
        context.closePath();
        context.strokeStyle = "black";
        context.stroke();

运转上面代码，得到一个红色的闭合三角形，和一条玄色实线，如下图所示：

class="no-js"有哪些意思

以上就是如何用canvas来绘制线条的细致内容，更多请关注 百分百源码网 其它相干文章！