博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Canvas基本知识点三:线条操作
阅读量:5861 次
发布时间:2019-06-19

本文共 1229 字,大约阅读时间需要 4 分钟。

一、概述

  • 线条的基本属性主要有以下几种:

lineWidth:定义线条的宽度

lineCap:定义线帽样式

lineJoin:定义两个线条交接处的样式。

  • 线条的操作方法:

setLineDash():定义线条的虚实样式。

二、lineWidth

语法

cxt.lineWidth = 整数复制代码

说明

属性取值为整数,默认值为1,默认单位为px。

cxt.lineWidth = 5;cxt.moveTo(20,20);cxt.lineTo(180,20);cxt.stroke();cxt.beginPath();cxt.lineWidth = 15;cxt.moveTo(20,70);cxt.lineTo(180,70);cxt.stroke();复制代码

beginPath()用于开始一条新路径,如果将其删除,则后面的直线会覆盖前面的线宽。

lineWidth属性不仅用于直线,还可以用作曲线图形,此外需要注意的是,假设线条宽度为lineWidth,则strokeRect()方法绘制的矩形实际宽度是(width+lineWidth),实际高度为(height+lineWidth)。而arc()方法绘制的圆形实际半径为(radius+lineWidth)。

三、lineCap

语法

cxt.linecap = “属性值”复制代码

属性值:

Butt:默认值,无线帽。每条线的头部和尾部都是长方形,也就是不做任何处理。

Round:圆形线帽。每条线的头和尾都增加一个半圆,半圆的直径为线宽的长度。

Square:正方形线帽。每条线的头尾都增加一个长方形,长方形的长度为线宽的一般,高度保持线宽。

注意Round和Square会使线条稍微变长一点,因为他们给线条增加了线帽部分。

lineCap属性只对线条的开始处和结尾处这两个地方起作用,而线段和线段衔接的地方依旧是尖角。要想改变,线段与线段交接的地方,就需要用lineJoin属性了。

四、lineJoin

语法:

cxt.lineJoin = '属性值'复制代码

属性:

miter:默认值,尖角。线段在交接处延伸直至交于一点,为默认值。

round:圆角。交界处是一个圆角,圆角所在圆的直径等于线宽长度。

bevel:斜角。连接处是一个斜角,斜角所在正方形的对角线长等于线宽的长度。

在canvas中,lineCap定义线条开始和结尾的样式,而lineJoin定义的是交界处的样式。

五、setLineDash()方法

语法:

cxt.setLineDash(array)复制代码

说明:

array是一个数组组合。

数组【10,5】表示10px实线和5px空白重复拼接组合而成的线型。

【10,5,5,5】表示10px实线、5px空白、5px实线、5px空白重复拼凑组合而成的线型。

转载于:https://juejin.im/post/5b863c4a51882542d5719e49

你可能感兴趣的文章
SRM 401(1-250pt, 1-500pt)
查看>>
Tarjan 离线求LCA
查看>>
一、资源合并与压缩
查看>>
虚拟机上网
查看>>
ThinkPHP快捷函数
查看>>
BZOJ 4460 [Jsoi2013]广告计划 ——Bitset 后缀自动机
查看>>
吴恩达机器学习笔记44-核函数(Kernels)
查看>>
学习笔记_Cocos Creator_继承组件单例
查看>>
批量建文件夹【win7企业版】
查看>>
poj1236 强连通
查看>>
angular 中表单验证的探索
查看>>
作业五 | 结对项目-四则运算 “软件”之升级版
查看>>
设置默认的超时和重试是一个基础设施的基本素养
查看>>
Spring boot 默认静态资源路径与手动配置访问路径
查看>>
Shell学习日记
查看>>
[解题报告]424 - Integer Inquiry
查看>>
江苏省地理国情质检处理系统使用说明
查看>>
[K/3Cloud] 分录行复制和新增行的冲突如何处理
查看>>
基础数据挖掘--途牛网
查看>>
JS截取字符串
查看>>