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

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

 

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
 
 
修改下代码,平行线就不模糊了

 Canvas---绘制平行线&线模糊的问题_第1张图片

 

 

Canvas---绘制平行线&线模糊的问题_第2张图片

 

 

 

DOCTYPE html>
<html lang="en">

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

<body>
    
    <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>

 

 

Canvas---绘制平行线&线模糊的问题_第3张图片

 

你可能感兴趣的:(Canvas---绘制平行线&线模糊的问题)