Canvas学习笔记 | 线条操作
前言
大家好,我是汪小成。最近在学习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> 复制代码
效果图:
**注意:**开始绘制新的路径前,必须要先调用beginPath()
方法开启新的路径,启用新的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> 复制代码
效果图:
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> 复制代码
效果图:
从效果图中我们可以看出,round
和sequre
值会使线条稍微变长一点,因为它们给线条增加了线帽部分。
当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> 复制代码
效果图:
当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> 复制代码
效果图:
作者:嗨皮汪小成
链接:https://juejin.cn/post/7171608783348006920
来源:https://www.77cxw.com/