Canvas绘制线条

Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。

代码如下：

<body>
    <canvas id="demoCanvas" width="500" height="600">
    </canvas>
    <script type="text/javascript">
        //通过id获得当前的Canvas对象
        var canvasDom = document.getElementById("demoCanvas");
        //通过Canvas Dom对象获取Context的对象
        var context = canvasDom.getContext("2d");
        context.beginPath(); // 开始路径绘制
        context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
        context.lineTo(200, 200); // 绘制一条到(200,20)的直线
        context.lineTo(400, 20);
        context.closePath();
        context.lineWidth = 2.0; // 设置线宽
        context.strokeStyle = "#CC0000"; // 设置线的颜色
        context.stroke(); // 进行线的着色，这时整条线才变得可见
    </script>
</body>

继续学习

新建文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>huatu</title> <body> <canvas id="demoCanvas" width="500" height="600"> </canvas> <script type="text/javascript"> //通过id获得当前的Canvas对象 var canvasDom = document.getElementById("demoCanvas"); //通过Canvas Dom对象获取Context的对象 var context = canvasDom.getContext("2d"); context.beginPath(); // 开始路径绘制 context.moveTo(20, 20); // 设置路径起点，坐标为(20,20) context.lineTo(200, 200); // 绘制一条到(200,20)的直线 context.lineTo(400, 20); context.closePath(); context.lineWidth = 2.0; // 设置线宽 context.strokeStyle = "#CC0000"; // 设置线的颜色 context.stroke(); // 进行线的着色，这时整条线才变得可见 </script> </body> </html>

提交重置代码

自动运行

章节

笔记

提问

课件

反馈

捐赠