Canvas学习笔记 | 线条操作

949 阅读3分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

大家好,我是汪小成。最近在学习Canvas。这篇文章是我学习Canvas线条操作时记的笔记,欢迎大家审阅。

简介

在Canvas中,常见的线条操作属性有:

属性说明
lineWidth定义线条宽度
lineCap定义线帽样式
lineJoin定义两个线条交接处的样式

常见的线条操作方法有:

方法说明
setLineDash()定义虚线样式

lineWidth属性

在Canvas中,我们可以通过lineWidth属性定义线条的宽度。

语法:

ctx.lineWidth = 整数;

说明:

lineWidth属性的值为整数,默认值为1,默认单位为px

示例:lineWidth属性用于绘制直线图形

示例源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lineWidth示例</title>
  </head>
  <body>
    <canvas id="canvas" width="240" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(20, 20);
        ctx.lineTo(120, 20);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.moveTo(20, 70);
        ctx.lineTo(120, 70);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth = 15;
        ctx.moveTo(20, 120);
        ctx.lineTo(120, 120);
        ctx.stroke();

        // 说明文字
        ctx.fillStyle = 'red';
        ctx.fillText('线条宽度5px', 140, 25);
        ctx.fillText('线条宽度5px', 140, 75);
        ctx.fillText('线条宽度5px', 140, 125);
		
      };
    </script>
  </body>
</html>

效果图:

lineWidth示例-效果图

**注意:**开始绘制新的路径前,必须要先调用beginPath()方法开启新的路径,启用新的lineWidth属性值。

我们试着把上面示例中的所有beginPath()方法删除,在浏览器中的展示效果如下图:

02.lineWidth示例-删除beginPath()

lineWidth属性不仅可以用于直线图形,也可用于曲线图形。

示例:lineWidth属性用于绘制曲线图形

示例源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lineWidth用于绘制曲线图形</title>
  </head>
  <body>
    <canvas id="canvas" width="240" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.arc(120, 75, 50, 0, 150 * Math.PI / 180, true);
        ctx.stroke();
      };
    </script>
  </body>
</html>

效果图:

lineWidth用于绘制曲线图形

lineCap属性

在Canvas中,我们使用lineCap属性定义线帽样式。

语法:

ctx.lineCap = "属性值";

说明:

lineCap属性取值如下表:

属性值说明
butt默认值,无线帽
round圆形线帽
square正方形线帽

示例:lineCap属性示例

示例源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lineCap属性示例</title>
  </head>
  <body>
    <canvas id="canvas" width="280" height="150"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
		
        ctx.lineWidth = 16;
		
        ctx.beginPath();
        ctx.moveTo(20, 20);
        ctx.lineTo(120, 20);
        ctx.stroke();
		
        ctx.beginPath();
        ctx.lineCap = "round";
        ctx.moveTo(20, 70);
        ctx.lineTo(120, 70);
        ctx.stroke();
		
        ctx.beginPath();
        ctx.lineCap = "square";
        ctx.moveTo(20, 120);
        ctx.lineTo(120, 120);
        ctx.stroke();
        
        // 说明文字
        ctx.fillStyle = 'red';
        ctx.fillText('lineCap值为默认值(butt)', 140, 25);
        ctx.fillText('lineCap值为默认值(round)', 140, 75);
        ctx.fillText('lineCap值为默认值(square)', 140, 125);
		
        // 辅助线
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.setLineDash([5, 5]);
        ctx.strokeStyle = "red";
        ctx.moveTo(20, 0);
        ctx.lineTo(20, 150);
        ctx.moveTo(120, 0);
        ctx.lineTo(120, 150);
        ctx.stroke();
      };
    </script>
  </body>
</html>

效果图:

lineCap属性示例

从效果图中我们可以看出,roundsequre值会使线条稍微变长一点,因为它们给线条增加了线帽部分。

lineCap取值为butt时,线条头和尾没有做任何处理;当lineCap取值为round时,线条的头和尾都增加了一个半圆,半圆的直径为线宽的长度;当lineCap取值为square时,线条的头和尾都增加了一个长方形,长方形的长度为线宽的一半,长方形的宽为线宽的长度。

lineJoin属性

在Canvas中,我们使用lineJoin属性定义两个线条交接处的样式。

语法:

ctx.lineJoin = "属性值";

lineJoin属性取值如下:

属性值说明
miter默认值,尖角
round圆角
bevel斜角

示例:lineJoin简单示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>lineJoin属性示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
		
        let size = 400;

        // 设置线宽
        ctx.lineWidth = 12;

        ctx.lineJoin = 'miter';
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.moveTo(50, 50);
        ctx.lineTo(100, 50);
        ctx.lineTo(50, 100);
        ctx.lineTo(100, 100);
        ctx.stroke();

        ctx.lineJoin = 'round';
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.moveTo(150, 50);
        ctx.lineTo(200, 50);
        ctx.lineTo(150, 100);
        ctx.lineTo(200, 100);
        ctx.stroke();

        ctx.lineJoin = 'bevel';
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.moveTo(250, 50);
        ctx.lineTo(300, 50);
        ctx.lineTo(250, 100);
        ctx.lineTo(300, 100);
        ctx.stroke();

        // 说明文字
        ctx.fillStyle = 'red';
        ctx.fillText('lineJoin属性值为miter', 20, 130);

        ctx.fillStyle = 'green';
        ctx.fillText('lineJoin属性值为round', 130, 130);

        ctx.fillStyle = 'blue';
        ctx.fillText('lineJoin属性值为bevel', 240, 130);
      };
    </script>
  </body>
</html>

效果图:

image.png

lineJoin属性值为miter时,线条在交接处延伸直至交于一点;当lineJoin属性值为rount时,线条交接处是一个圆角,圆角所在圆的直径等于线宽长度;当lineJoin属性值为bevel时,线条连接处是一个斜角,斜角所在正方形的对角线的长度等于线宽的长度。

setLineDash()方法

在Canvas中,我们使用setLineDash()方法定义线条的虚实样式。

语法:

ctx.setLineDash(array);

说明:

参数array是一个由实线长度与空白长度拼凑组合而成的数组。比如数组[10, 5]表示的是“10px实线“和”5px空白“重复拼凑组合而成的线形。

示例:setLineDash()方法简单示例

示例源码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>setLineDash()方法示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"
      style="border: 1px dashed #333333" ></canvas>
    <script>
      window.onload = function () {
        // 1、获取 Canvas 对象
        var canvas = document.getElementById("canvas");
        // 2、获取上下文环境对象
        var ctx = canvas.getContext("2d");
        // 3、开始绘制图形
		
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.setLineDash([10, 5]);
        ctx.moveTo(100, 50);
        ctx.lineTo(300, 50);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.setLineDash([10, 5, 5, 5]);
        ctx.moveTo(100, 100);
        ctx.lineTo(300, 100);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.setLineDash([2, 2]);
        ctx.moveTo(100, 150);
        ctx.lineTo(300, 150);
        ctx.stroke();

        // 说明文字
        ctx.fillStyle = 'red';
        ctx.fillText('[10, 5]', 20, 50);

        ctx.fillStyle = 'green';
        ctx.fillText('[10, 5, 5, 5]', 20, 100);

        ctx.fillStyle = 'blue';
        ctx.fillText('[2, 2]', 20, 150);
      };
    </script>
  </body>
</html>

效果图:

setLineDash()方法示例