Canvas学习笔记之画线_system.windows.shapes 在canves中心绘制横线-CSDN博客

本文链接：https://blog.csdn.net/qq814374557/article/details/74839068

Canvas学习笔记之画线

步骤

1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()。
5.制定画笔光标moveTo(x, y)。
6.进行路径绘制lineTo(x, y)。
7.进行绘制图形颜色绘制。

注意事项

1.IE8以下浏览器不支持，可以使用excanvas进行模仿canvas。
2.canvas的画布大小是要在标签中声明中就要定义的，所以，提前定义好width和height。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100">您的浏览器不支持HTML5</canvas>
        <script>
            // var c = document.getElementById('myCanvas');
            // var ctx = c.getContext('2d');
            // ctx.lineWidth = 10;
            // ctx.strokeStyle = '#f00';
            // ctx.beginPath();
            // ctx.moveTo(10, 10);
            // ctx.lineTo(150, 50);
            // ctx.stroke();


            // 三种线帽
            var c = document.getElementById('myCanvas');
            var ctx = c.getContext('2d');
            ctx.lineWidth = 10;
            ctx.strokeStyle = '#f00';

            //默认笔帽，平直边缘
            ctx.lineCap = 'butt';
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(150, 10);
            ctx.stroke();

            //圆头笔帽
            ctx.lineCap = 'round';
            ctx.beginPath();
            ctx.moveTo(10, 40);
            ctx.lineTo(150, 40);
            ctx.stroke();

            //方格笔帽
            ctx.lineCap = 'square';
            ctx.beginPath();
            ctx.moveTo(10, 70);
            ctx.lineTo(150, 70);
            ctx.stroke();
        </script>
    </body>
</html>

效果图

这里写图片描述