• 售前

  • 售后

热门帖子
入门百科

HTML5 Canvas——用路径描画线条实例介绍

[复制链接]
又见阿凡提彻 显示全部楼层 发表于 2021-10-25 19:44:24 |阅读模式 打印 上一主题 下一主题
原文:
http://www.lifelaf.com/blog/?p=371
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Using Paths to Create Lines”

对于HTML5 Canvas,我们可以使用“路径”来刻画任何图形。路径,简单来说就是一系列的点以及毗连这些点的线。任何Canvas上下文只会有一个“当前路径”,而当context.save()调用时,该“当前路径”并不会被保存。

路径的开始与竣事

调用beginPath()可以开始一个路径,而调用closePath()则会令该路径竣事。如果毗连路径中的点,那么这种毗连就构成了一个“子路径”。如果“子路径”中末了一个点与其自身的第一个点相连,我们就以为该“子路径”是“闭合”的。

线条的刻画

最根本的路径操纵由反复调用moveTo()和lineTo()下令构成。比如以下这个例子:

复制代码代码如下:
function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}

在上面的例子中,我们刻画了一条程度的、宽度为10个像素的线段;与此同时,我们还设定了lineCap与strokeStyle属性。以下是一些常用的属性列表:

lineCap
lineCap界说了在Canvas中线段两端的样式,可设置为以下三个值中的一个:

butt。默认值;在线段的两端添加平直边沿。
round。在线段的两端各添加一个半圆形线帽。线帽直径即是线段的宽度。
square。在线段的两端添加正方形线帽。线帽边长即是线段的宽度。
lineJoin
lineJoin界说了两条线段相交处的弯角样式。以下为三个可选的值:

miter。默认值;创建一个尖角。可以通过设置miterLimit属性来对尖角长度进行限定 — miterLimit为尖角长度和线条宽度之比的最大值,默以为10。
bevel。创建一个斜角。
round。创建一个圆角。
lineWidth
lineWidth界说了线条的粗细,默以为1.0。

strokeStyle
strokeStyle界说了用于渲染线条的颜色等样式。

译注:当lineJoin设定为miter,但是尖角长度凌驾了miterLimit的限定时,Canvas将体现“bevel”弯角效果。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作