专栏首页Devops专栏Canvas使用beginPath()绘画不同颜色的直线

Canvas使用beginPath()绘画不同颜色的直线

Canvas绘画三条平行线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #cccccc;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取元素*/
            var myCanvas = document.querySelector('#myCanvas');
            /*获取绘图工具*/
            var context = myCanvas.getContext('2d');

            /*绘制第一条线*/
            context.moveTo(100,100.5);
            context.lineTo(200,100.5);

            /*绘制第二条线*/
            context.moveTo(100,200);
            context.lineTo(200,200);

            /*绘制第三条线*/
            context.moveTo(100,300);
            context.lineTo(200,300);

            /*描边*/
            context.stroke();
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器展示如下:

使用strokeStyle和lineWidth设置画笔的颜色以及宽度

context.strokeStyle = 'pink';  // 设置颜色
context.lineWidth = 10;        // 设置宽度

从图中可以看到,在每条直线都设置上了颜色和宽度,那么会不会画出三条不同颜色的直线呢?

看看浏览器展示如下:

原因是因为每条直线都各自设置context的属性,上面的属性设置都被最下面的设置覆盖了,所以就是最后设置的粉红色。

那么怎么才可以绘画出三条不同颜色的指向呢?

使用beginPath()开启新路径,绘画三条不同颜色的直线

context.beginPath(); // 开启新路径
context.stroke();

注意:每次设置开启新路径之后,都要设置描边,不然就会无法绘画。

看看浏览器的展示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

    上面绘画了三条平行线设置了末端样式,下面给三条平行线进行打折,使用lineJoin的方式设置拐点的样式。

    Devops海洋的渔夫
  • Canvas 绘制镂空的正方形 以及 非零环绕填充规则

    绘画的方法一: 画四条线,然后设置线的宽度很宽,组合为一个镂空的正方形。 绘画的方法二: 画两个嵌套的正方形,采用非零环绕填充规则进行颜色的填充。

    Devops海洋的渔夫
  • Canvas绘制平行线以及解决直线模糊问题

    其实在绘制直线的时候,默认是绘制1px的宽度,但是绘制直线的中轴线位置是在坐标轴刻度的上,如下:

    Devops海洋的渔夫
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • HTML5动态时钟

    felix
  • canvas荧光表源码分享

    Youngxj
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • Canvas 基本绘制(下)

    HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

    HTML5学堂
  • 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(下)

    矩 阵 变 化 其实像 translate(移动),scale(缩放),rotate(旋转)都是特殊的矩阵变换 transform(m11,m12,m21,m2...

    逸鹏

扫码关注云+社区

领取腾讯云代金券