网站首页 > 基础教程 正文
#头条创作挑战赛#
在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>效果图：
猜你喜欢
- 2024-10-12 web前端:canvas动画彩色气泡，类直播间点赞效果实现
- 2024-10-12 HTML使用Canvas绘制动画时钟 canvas绘制钟表
- 2024-10-12 三个绘图工具类详解 常用的绘图工具有哪些,分别有什么用
- 2024-10-12 如何用不到 2KB 的 JavaScript 代码写一个 3D 赛车游戏?
- 2024-10-12 VUE动态生成二维码并利用canvas合成海报图
- 2024-10-12 JavaScript+Canvas实现自定义画板
- 2024-10-12 JavaScript 中的画布 js实现画板
- 2024-10-12 canvas绘制饼图的方法介绍(代码) canvas画饼状图百分比
- 2024-10-12 H5表白特效——Canvas实现粒子涂鸦效果
- 2024-10-12 h5-自定义生成海报(头条初吻，轻虐)
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)