专栏首页Devops专栏Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset

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

设置Canvas画笔的样式

  • 画笔的状态
    • lineWidth 线宽,默认1px
    • lineCap 线末端类型:(butt默认)、round、square
    • lineJoin 相交线的拐点 miter(默认)、round、bevel
    • strokeStyle 线的颜色
    • fillStyle 填充颜色
    • setLineDash() 设置虚线
    • getLineDash() 获取虚线宽度集合
    • lineDashOffset 设置虚线偏移量(负值向右偏移)

lineWidth 设置线条的宽度

<!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); // 起点
            context.lineTo(300,100); // 第一条线
            context.lineTo(300,300); // 第二条线
            context.lineTo(100,300); // 第三条线
            context.closePath(); // 结束路径,自动闭合

            /*设置线条*/
            context.lineWidth = 50;
            context.stroke();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器展示如下:

lineCap 线末端类型:(butt默认)、round、square

下面使用lineCap画三条线条的末端,用于区分展示,示例如下:

<!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.beginPath();
            context.moveTo(100,100);
            context.lineTo(300,100);

            context.lineWidth = 20; // 设置线条宽度 10px
            context.strokeStyle = 'red'; // 设置线条的颜色
            context.stroke(); // 描边

            // 第二条线
            context.beginPath();
            context.moveTo(100,150);
            context.lineTo(300,150);

            context.lineWidth = 20; // 设置线条宽度 10px
            context.strokeStyle = 'blue'; // 设置线条的颜色
            context.lineCap = 'round'; // 设置末端为round
            context.stroke();

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

            context.lineWidth = 20; // 设置线条宽度 10px
            context.strokeStyle = '#ccc'; // 设置线条的颜色
            context.lineCap = 'square'; // 设置末端为square
            context.stroke();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器展示如下:

同时要知道,当线条的宽度越大,线条对应增加的帽子也就越大,如下:

lineJoin 相交线的拐点 miter(默认)、round、bevel

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

<!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.beginPath();
            context.moveTo(100,100);
            context.lineTo(200,50); // 设置拐点
            context.lineTo(300,100);

            context.lineWidth = 30; // 设置线条宽度 30px
            context.strokeStyle = 'red'; // 设置线条的颜色
            context.stroke(); // 描边

            // 第二条线
            context.beginPath();
            context.moveTo(100,150);
            context.lineTo(200,100); // 设置拐点
            context.lineTo(300,150);

            context.lineWidth = 30; // 设置线条宽度 30px
            context.strokeStyle = 'blue'; // 设置线条的颜色
            context.lineCap = 'round'; // 设置末端为round
            context.lineJoin = 'round'; // 设置拐点为round
            context.stroke();

            // 第三条线
            context.beginPath();
            context.moveTo(100,200);
            context.lineTo(200,150); // 设置拐点
            context.lineTo(300,200);

            context.lineWidth = 30; // 设置线条宽度 30px
            context.strokeStyle = '#ccc'; // 设置线条的颜色
            context.lineCap = 'square'; // 设置末端为square
            context.lineJoin = 'bevel'; // 设置拐点为bevel
            context.stroke();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

fillStyle 填充颜色

context.fillStyle = 'red'; // 设置填充颜色

下面绘画一个正方形,并使用fillStyle来填充颜色。

<!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); // 起点
            context.lineTo(300,100); // 第一条线
            context.lineTo(300,300); // 第二条线
            context.lineTo(100,300); // 第三条线
            context.closePath(); // 结束路径,自动闭合

            /*绘画逆时针内部正方形*/
            context.moveTo(250,150); // 起点
            context.lineTo(150,150); // 第一条线
            context.lineTo(150,250); // 第二条线
            context.lineTo(250,250); // 第三条线
            context.closePath(); // 结束路径,自动闭合

            /*填充颜色*/
            context.fillStyle = 'red'; // 设置填充颜色
            context.fill();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

setLineDash() 设置虚线

<!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 ctx = myCanvas.getContext('2d');

            /*绘画第一条虚线*/
            ctx.moveTo(100,100.5);
            ctx.lineTo(300,100.5);
            /*[5,10] 数组是用来描述你的排列方式的*/
            ctx.setLineDash([10,30]);

            /*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
            console.log(ctx.getLineDash());

            /*如果是正的值 往后偏移*/
            /*如果是负的值 往前偏移*/
            ctx.lineDashOffset = -20;

            ctx.stroke();

        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

浏览器显示如下:

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    Devops海洋的渔夫
  • Canvas使用fill()填充绘画三角形以及使用closepath()解决缺角问题

    出现这个的原因跟前面篇章中说到画线的中轴线位置是在刻度位置的问题一样。那么有没有办法解决这个缺角的问题呢?

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

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

    Devops海洋的渔夫
  • Canvas高级

    天天_哥
  • HTML5动态时钟

    felix
  • canvas荧光表源码分享

    Youngxj
  • Canvas 基本绘制(下)

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

    HTML5学堂
  • HTML5之Canvas

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

    疯狂的技术宅
  • 学习Javascript之模拟实现call,apply

    总括: 本文从零开始通过提出问题然后解决问题的方式模拟实现了比较完善的call和apply方法

    Damonare
  • canvas 实现自定义钟表

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

    acoolgiser

扫码关注云+社区

领取腾讯云代金券