canvas教程9-线型的属性

最新推荐文章于 2024-04-10 16:05:41 发布

VIP文章梦幻之光_dream

最新推荐文章于 2024-04-10 16:05:41 发布

阅读量546

点赞数

分类专栏： Web前端开发文章标签： canvas

本文链接：https://blog.csdn.net/William_fang/article/details/119188858

版权

一.线型知识

lineWidth属性： 设置线的粗细，属性值必须是数字，默认是1且没有单位。

lineCap属性的作用： 绘制线段末端。

lineCap有3个属性值：

butt:线段末端以方形结束。

round：线段末端以圆形结束。

square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度的一半的矩形区域。

在这里插入图片描述
图形参考网址：

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineCap

lineJoin属性的作用：设置图形中两段连接处所显示的样子。

lineJoin有3个属性值：

bevel：效果是平的。

round：效果是圆的。

miter：效果是尖的。它是默认的。

setLineDash([参数1，参数2]);

参数1：虚线的长度。

参数2：虚线之间的距离。

注意事项：这个方法可以传入好多的参数。

setLineDash([参数1,参数2,参数3，参数4...]);

参数1,2,3,4…是按照 “ 虚线的长度,虚线之间的距离,虚线的长度,虚线之间的距离… ” 的规律进行设置的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name

关注