Canvas---绘制平行线&线模糊的问题

绘制平行线&线模糊的问题

 

1. 准备画布

    <!-- 1. 画布 -->
    <canvas width="600" height="400"></canvas>

2. 加边框，让画布凸显出来

    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>

3. 获取canvas

4. 再拿工具箱（绘制上下文）context, 缩写为ctx

        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

5. 画平行线

        ctx.moveTo(100, 100.5);
        ctx.lineTo(300, 100.5);

        ctx.moveTo(100, 200);
        ctx.lineTo(300, 200);

        /*描边*/
        ctx.stroke();

 

关于线条的问题

1.默认的宽度是多少   1px
2.默认的颜色是什么   黑色
产生原因  对齐的点是线的中心位置  会把线分成两个0.5px 显示的是会不饱和增加宽度
解决方案  前后移动0.5px
 
 
修改下代码，平行线就不模糊了

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 2. 让画布显示，加个边框 */
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- 1. 画布 -->
    <canvas width="600" height="400"></canvas>
    <script>
        // 3. 拿到canvas, 4. 再拿工具箱（绘制上下文）context, 缩写为ctx
        var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

        /*5. 画平行线*/

        ctx.moveTo(100, 100.5);
        ctx.lineTo(300, 100.5);

        ctx.moveTo(100, 200);
        ctx.lineTo(300, 200);

        /*描边*/
        ctx.stroke();


        /*关于线条的问题*/
        /*1.默认的宽度是多少   1px*/
        /*2.默认的颜色是什么   黑色*/
        /*产生原因  对齐的点是线的中心位置  会把线分成两个0.5px 显示的是会不饱和增加宽度*/
        /*解决方案  前后移动0.5px */

    </script>
</body>

</html>

 

 

 

posted @ 2020-02-11 14:01  jane_panyiyun  阅读(326)  评论(0)  编辑  收藏  举报