文章专题学习下载问答编程词典手游最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

首页> web前端> H5教程> 正文

HTML5 Canvas的常用线条属性值总结_html5教程技巧

WBOY

发布： 2016-05-16 15:45:38

原创

2097 人浏览过

线条属性概述
线条的属性共有以下四个：
1、lineCap属性
lineCap 定义上下文中线的端点，可以有以下 3 个值。

butt：默认值，端点是垂直于线段边缘的平直边缘。
round：端点是在线段边缘处以线宽为直径的半圆。
square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。

2、 lineJoin属性
lineJoin 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性。

miter：默认值，在连接处边缘延长相接。miterLimit 是角长和线宽所允许的最大比例(默认是 10)。
bevel：连接处是一个对角线斜角。
round：连接处是一个圆。

3、线宽
lineWidth 定义线的宽度(默认值为 1.0)。

4、笔触样式
strokeStyle 定义线和形状边框的颜色和样式。
后面两个前面已经说过了，这里我们着重来看看前两个属性。
线条的帽子lineCap

废话不多说，直接上代码看效果。

JavaScript Code 复制内容到剪贴板

nbsp;html>
"zh">
"UTF-8">
线条的帽子
"canvas-warp" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

context.lineWidth = 50;

context.strokeStyle ="#1BAAAA";

context.beginPath();

context.moveTo(100,100);

context.lineTo(700,100);

context.lineCap ="butt";

context.stroke();

context.beginPath();

context.moveTo(100,300);

context.lineTo(700,300);

context.lineCap ="round";

context.stroke();

context.beginPath();

context.moveTo(100,500);

context.lineTo(700,500);

context.lineCap ="square";

context.stroke();

//下面画两个基准线方便观察

context.lineWidth = 3;

context.strokeStyle ="black";

context.beginPath();

context.moveTo(100,0);

context.lineTo(100,600);

context.moveTo(700,0);

context.lineTo(700,600);

context.stroke();

}

运行结果：
2016317114136241.jpg (850×500)

这里我还做了两条平行线做一下参考，这样一眼就能看清lineCap三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的lineJoin属性。
线条的连接lineJoin

废话不多说，直接上代码看效果。这段代码改自4-3，只是设置了一下连接的属性。

JavaScript Code 复制内容到剪贴板

nbsp;html>
"zh">
"UTF-8">
线条的连接
"canvas-warp" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

context.beginPath();

context.moveTo(100,100);

context.lineTo(300,300);

context.lineTo(100,500);

context.lineJoin ="miter";

context.lineWidth = 20;

context.strokeStyle ="red";

context.stroke();

context.beginPath();

context.moveTo(300,100);

context.lineTo(500,300);

context.lineTo(300,500);

context.lineJoin ="bevel";

context.lineWidth = 20;

context.strokeStyle ="blue";

context.stroke();

context.beginPath();

context.moveTo(500,100);

context.lineTo(700,300);

context.lineTo(500,500);

context.lineJoin ="round";

context.lineWidth = 20;

context.strokeStyle ="black";

context.stroke();

}

运行结果：
2016317114422384.jpg (850×500)

看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。
这里有一个很隐蔽的属性，就是当lineJoin设置为miter时（默认），会解锁一个成绩，可以使用miterLimit属性。
举个例子看看。

JavaScript Code 复制内容到剪贴板

nbsp;html>
"zh">
"UTF-8">
miterLimit
"canvas-warp" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

context.beginPath();

context.moveTo(100,100);

context.lineTo(300,300);

context.lineTo(100,500);

context.lineJoin ="miter";

context.miterLimit = 10;

context.lineWidth = 5;

context.strokeStyle ="red";

context.stroke();

context.beginPath();

context.moveTo(300,200);

context.lineTo(500,300);

context.lineTo(300,400);

context.lineJoin ="miter";

context.miterLimit = 10;

context.lineWidth = 5;

context.strokeStyle ="blue";

context.stroke();

context.beginPath();

context.moveTo(500,290);

context.lineTo(700,300);

context.lineTo(500,310);

context.lineJoin ="miter";

context.miterLimit = 10;

context.lineWidth = 5;

context.strokeStyle ="black";

context.stroke();

}

运行结果：
2016317114500411.jpg (850×500)

会发现，这个miterLimit规定了一个自动填充连接点的极限值。如果超过了这个值，会导致lineJoin属性失效，会从 miter 变成 bevel。可以看出来，这个值和线宽以及夹角有关，具体是啥关系。看下图。
2016317114533839.jpg (1240×530)

可以看到，关系有点复杂。有兴趣的小伙伴可以推导一下这个值与线宽、夹角的函数关系。其实，大多时候用不到这个隐藏属性，即便用到了也是凭感觉写个数然后不满意再调试即可。
高级线段绘制举例
实际在画布上绘制线段时，会有一些奇怪的现象发生，这里融合本节课学到的两个线段的属性讲解一个。

JavaScript Code 复制内容到剪贴板

nbsp;html>
"zh">
"UTF-8">
miterLimit
"canvas-warp" >
你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload =function(){

varcanvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

varcontext = canvas.getContext("2d");

// 实例1: 圆形端点,斜角连接,在画布左上角

context.beginPath();

context.moveTo(0,0);

context.lineTo(180,0);

context.lineTo(180,180);

context.lineJoin ='bevel';

context.lineCap ='round';

context.lineWidth = 10;

context.strokeStyle ="red";

context.stroke();

// 实例2: 圆形端点,斜角连接,不在画布左上角

context.beginPath();

context.moveTo(300,200);

context.lineTo(480,200);

context.lineTo(480,380);

context.lineJoin ='bevel';

context.lineCap ='round';

context.lineWidth = 10;

context.strokeStyle ="blue";

context.stroke();

// 实例3: 平直端点,圆形连接,不在画布左上角

context.beginPath();

context.moveTo(600,400);

context.lineTo(780,400);

context.lineTo(780,580);

context.lineJoin ='round';

context.lineCap ='butt';

context.lineWidth = 10;

context.strokeStyle ="black";

context.stroke();

}

运行结果：
2016317114621147.jpg (850×500)

这 3 个线段和连接的实例有助于说明在画布上绘制线段时不同属性的组合。
实例 1 尝试从画布左上角开始绘制，结果发生了一个奇怪的现象。Canvas 路径在 x 轴和 y 轴方向上都绘制到了起点的外侧。由于这个原因实例 1 上面的线看起来要细些。另外，左上角水平部分中圆形端点也无法看到，它们都被绘制到了屏幕之外的负值坐标区域。此外，lineJoin 定义的对角线斜角也没有绘出。
实例 2 调整了例子 1 中出现的问题,将起始点离开左上角。这样就绘制出了完整的水平线,并且圆形 lineCap 和斜角 lineJoin 都被绘制出来了。
实例 3 显示了去掉 lineCap 设置后的默认端点效果,并且将 lineJoin 调整为圆角。

相关标签：

canvas html5

来源：php.cn

上一篇：HTML5 画布canvas使用方法_html5教程技巧下一篇：多视角3D逼真HTML5水波动画 _html5教程技巧

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

萤火突击田氏宝箱刷新点在哪萤火突击田氏宝箱刷新点位置

2024-08-24 14:32:53
萤火突击仓库空间怎么扩容萤火突击仓库空间扩容方法

2024-08-24 14:31:38
《朝歌》孔宣阵容攻略

2024-08-24 14:00:47
《世界启元》斯基泰女王技能介绍

2024-08-24 13:55:29
长安幻想怎么换绑长安幻想换绑手机方法

2024-08-24 13:55:08
《金铲铲之战》s12熔火焦糖兰博阵容攻略

2024-08-24 13:54:23
《斗罗大陆：魂师对决》生命之神阿银阵容搭配

2024-08-24 13:54:08
《朝歌》异兽坐骑介绍

2024-08-24 13:53:21
《斗罗大陆：魂师对决》生命之神阿银加点攻略

2024-08-24 13:51:26
联想 9 月 14 款新品曝光，含 IdeaPad / ThinkBook / Yoga / Legion Go 等

2024-08-24 13:50:02

最新问题

如何使用Javascript设置HTML5的required属性？我正在尝试在Javascript中将text输入框标记为必需。

来自于 2023-10-13 08:52:25

无法获取鼠标准确坐标的问题：在调整页面大小时使用HTML5画布我想从前端专家那里创建这个像素效果。虽然我能够在全屏画布上实现整个像素效果：constcanvas=getElementById('canvas');canvas.height=w...

来自于 2023-09-12 12:20:33

0

1

280

使用Base64编码的HTML5视频M3U8 我想在HTML5的Video标签中添加一个base64编码的M3U8文件，我该怎么做

来自于 2023-09-09 23:07:18

vue.js / bootstrap：未调用 onclick 事件方法，错误'找不到变量：updateDocument” 我是前端开发新手，但对HTML5、CSS和Javascript有基本了解。我创建了一个vue.js项目并添加了bootstrap和axios。我的应用程序加载数据并显示它们。但是，...

来自于 2023-09-09 20:06:48

0

1

362

XHTML中移除图像标签中的闭合斜杠'/' 我有一个存储图像的字符串txt1。它的值是XHTML格式，即元素已关闭：。但我需要删除该关闭斜杠，因此它可以是就像HTML5中一样。有没有办法做到这一点。

来自于 2023-09-06 12:15:38

0

1

240

相关专题

更多>

热门推荐

热门教程

更多>

相关教程

热门推荐

最新课程

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1395748
php入门教程之一周学会PHP

4208173
JAVA 初级入门视频教程

2357770
小甲鱼零基础入门学习Python视频教程

493689
PHP 零基础入门教程

827158

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责声明 Sitemap: PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！