其他分享
首页 > 其他分享> > canvas 色彩、线型、渐变、图案、阴影

canvas 色彩、线型、渐变、图案、阴影

作者:互联网

 

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors


色彩 Colors

fillStyle = color
设置图形的填充颜色。

strokeStyle = color
设置图形轮廓的颜色。

globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。


线型 Line styles
lineWidth = value
设置线条宽度。
lineCap = type
设置线条末端样式。
lineJoin = type
设定线条与线条间接合处的样式。
miterLimit = value
限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。
getLineDash()
返回一个包含当前虚线样式,长度为非负偶数的数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
设置虚线样式的起始偏移量。


属性 lineCap 的值决定了线段端点显示的样子。
它可以为下面的三种的其中之一:butt,round 和 square。默认是 butt。

lineJoin 的属性值决定了图形中两线段连接处所显示的样子。
它可以是这三种之一:round, bevel 和 miter。默认是 miter


miterLimit 属性就是用来设定外延交点与连接点的最大距离,如果交点距离大于此值,连接效果会变成了 bevel。

setLineDash 方法和 lineDashOffset 属性来制定虚线样式. 
setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset 属性设置起始偏移量.

渐变 Gradients
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。

gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数,position 参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。

var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');

你会发现,strokeStyle 和 fillStyle 属性都可以接受 canvasGradient 对象。


图案样式 Patterns
createPattern(image, type)
该方法接受两个参数。
Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。
Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。

阴影 Shadows
shadowOffsetX = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。
负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。

shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离,它们是不受变换矩阵所影响的。
负值表示阴影会往上或左延伸,正值则表示会往下或右延伸,它们默认都为 0。
shadowBlur = float
shadowBlur 用于设定阴影的模糊程度,其数值并不跟像素数量挂钩,也不受变换矩阵的影响,默认为 0。
shadowColor = color
shadowColor 是标准的 CSS 颜色值,用于设定阴影颜色效果,默认是全透明的黑色。

标签:canvas,color,渐变,默认,阴影,样式,线型,参数,属性
来源: https://blog.csdn.net/aganliang/article/details/114379128