canvas基础--直线

使用Canvas绘制直线

最新推荐文章于 2020-11-25 20:54:14 发布

原创最新推荐文章于 2020-11-25 20:54:14 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #标签

对于canvas,说白了，其实就是一个标签，该标签占据一块空间，充当画布，然后你可以在这块空间里填充任何你想要实现的内容(专业成该内容为上下文，通常我们用context表示)。

空讲没啥意思，还是习惯用些小例子来说明问题。

就像上面提到的，是一个标签，所以我们在body里面必不可少的要写入

<body>
        <canvas id="myCanvas" width="500" height="500"
  //提示，用于提高用户体验，防止有的浏览器不支持canvas。（可不写）
            您的浏览器版本太低，点击<a href="#">下载</a>最新版本
        </canvas>
    </body>

为了我们在画布上面都没有的时候，可以看见画布在哪里，我们可以给画布设置一个边框

<style type="text/css">
            canvas {
                /*canvas 不能直接设置css样式的大小，否则会导致canvas里面的图片变形*/
                border: 1px solid red;
                margin: 100px 100px;
            }
        </style>

做好了准备工作，接下来就是画图形了。
从最简单的开始，我们来画一条直线。

<script type="text/javascript">
        //获取canvas节点
        var canvas = document.getElementById("myCanvas");
        //获取canvas画布的上下文
        var context = canvas.getContext("2d");
        //画直线
        //新建路径（图层）
        context.beginPath();
        //移动画笔开始画的位置,位置是相对于画布而言的
        context.moveTo(0, 0);
        //移动画笔到该位置
        context.lineTo(250, 250);
        //设置线的颜色
        context.strokeStyle = "red";
        //设置线的线宽
        context.lineWidth = 20;
        //将图形渲染到画布上，否则虽然画了东西，但是显示不出来
        context.stroke();

        //为了图形之间不相互影响，一定要在每次画一个图形之前，新建一个图层也就是每次都加一个context.beginPath();
        context.beginPath();
        context.moveTo(500, 0);
        context.lineTo(250, 250);
        context.strokeStyle = "blue";
        context.lineWidth = 20;
                context.lineCap = "round";
        context.stroke();
    </script>

需要注意的是：ele.getContext(“2d”);这个方法的调用一定不能少。
结果：屏幕快照 2017-12-25 下午9.01.25.png

既然说到了直线，那我们就顺便说一下线帽，ele.lineCap:butt/round/square,三个属性的具体效果，大家可以自己尝试，我们这里只展示round属性值得效果。

还是老一套：

        context.beginPath();
        context.lineWidth = 20;
        context.strokeStyle = "red";

        //设置线帽
        context.lineCap = "round";
        //context.lineCap ="butt";
        //context.lineCap = "square";
        //设置透明度,这里就是另一个相关的知识点了，
        //见名知义，global为全局的，也就是设置了该属性，画布里的直线都会有一个透明度。
        //解决这个问题，我们还是用rgba(),代替它给线条设置颜色，
        //这里参照上述设置颜色的方法，就不写代码了。
        context.globalAlpha = 0.5;

        context.moveTo(100, 100);
        context.lineTo(100, 200);
        //这里的moveTo是为了设置第一条线的平行线，方便对照
        context.moveTo(200, 100);
        context.lineTo(200, 200);