HTML5技术

【canvas学习笔记三】样式和颜色 - 池月

字号+ 作者:H5之家 来源:H5之家 2017-08-03 14:01 我要评论( )

上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条。这节就来学习设置不同的颜色和线条样式。 颜色 设置颜色主要有两个属性: fillStyle = color 设置填充颜色 strokeStyle = color 设置描边颜色 颜色值可以用十六进制也可以用一些内置

上一节我们学习了如何用路径绘制各种形状,但我们只能用默认的颜色和线条。这节就来学习设置不同的颜色和线条样式。

颜色

设置颜色主要有两个属性:

fillStyle = color
设置填充颜色
strokeStyle = color
设置描边颜色

颜色值可以用十六进制也可以用一些内置的颜色字符,还可以用rgb和rgba格式。

例子:

...

下面来看看一个填充颜色的例子和一个描边颜色的例子:

填充颜色示例

在下面这个例子中,我们创建了6X6的方块,每个方块都填充了不同的颜色。根据i、j的值,生成R通道和G通道的值,而B通道的值为固定值0。

ctx (i ij j.i) .j) .i )

效果

image

描边颜色示例

这个例子和上一个例子类似。在这个例子中,R通道的值固定,G和B通道的值根据i、j的值变化。

ctx (i ij j.i) .j) .j i .)

效果

image

Tips:

如果没有设置fillStyle或strokeStyle,则默认的fillStyle或strokeStyle是黑色,如果设置了fillStyle或strokeStyle,则默认的颜色就变成设置的颜色。

透明

我们可以直接通过rgba的方式设置颜色从而实现透明的效果,如下:

.

我们还可以设置全局的透明度,设置了全局透明度,之后绘制的图形都会是这个透明度。全局透明度的值是0~1。

globalAlpha = transparencyValue

例子

ctx ..).).).).(i i i.i.)

效果

image

线条样式

有很多属性和API可以设置线条的样式。

lineWidth = value
设置线条的宽度。
lineCap = type
设置线条端点的样式。
lineJoin = type
设置线条连接处的样式。
miterLimit = value
设置或返回最大斜接长度。
getLineDash()
获取当前虚线的样式,返回设置虚线的线宽数组。
setLineDash(segments)
设置当前虚线样式。
lineDashOffset = value
确定一条线从哪里开始是虚线。

lineWidth

线宽这个属性就是设置线的粗细。它的值不能是负数,单位是像素。默认值是1像素。
下面我们先来看一个例子:

ctx (i ii.)i )

效果:

image


注意看的话会发现,奇数位置的线条边缘有些模糊,这是因为位置不对,这就需要了解线生成的机制。

image


如图,图中一个方格表示一个像素。如果要在坐标(3,1)到坐标(3,5)之间画一条1像素宽的直线,那么线的宽度将会如图中第一张图的深蓝部分所示,左右的宽度只占半个像素。半个像素是无法绘制的,所以实际绘制的线条是第二章图所示的内容。它实际的位置并不正确。

lineCap

lineCap属性设置了线段端点的样式。它的值有三种:

butt (默认值)
端点是方的。
round
端点是圆的。
square
端点多出一个宽度和线宽一样,长度是线宽一般的方块。

三种样式从左到右如图:

image

lineJoin

这个属性设置了线段连接处的样式。
它的值有三种:

round
连接处是圆的。
bevel
连接处是一个三角形。
miter(默认值)
连接处是一个菱形。

从上到下效果如图:

image

miterLimit

miterlimit属性就是对上文miter作控制的一个属性。简单的说,miterlimit属性就是控制miter的大小的。
下面来简单说明一下它的效果:

image


image


image


上面三张图分别是miterlimit属性值为1、5、10时的效果。miterlimit属性实际上久时hi限制了连接处菱形的大小。

setLineDash(segments) && lineDashOffset

利用setLineDash(segments)方法和lineDashOffset属性就可以自己设置虚线的样式。
setLineDash(segments)接受一个数组作参数,数组的第一个元素规定了虚线中每一小段虚线的长度,第二个参数规定了虚线中每一小段虚线之间的间隔距离。
lineDashOffset设置了虚线样式是从哪里开始的。
下面用一个蚂蚁线的动画例子来说明一下它们的用法:

offset () ..])offset)() { offset) { offset ())();

效果

image


通过间隔一段时间增加lineDashOffset的方法达到虚线移动的效果。这个效果经常用来表示选中。

渐变

canvas可以创建渐变对象,将渐变对象赋值给strokeStyle或fillStyle,就可以画出渐变的颜色。
有两种渐变对象,一种是线性渐变,一种是径向渐变:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas基础 - 一颗快乐心

    canvas基础 - 一颗快乐心

    2017-08-03 15:00

  • 细思极恐:被软链接拯救的数据 - 运维笔记

    细思极恐:被软链接拯救的数据 - 运维笔记

    2017-08-03 13:01

  • HTML5使用Canvas来绘制图形 - 小君君的博客

    HTML5使用Canvas来绘制图形 - 小君君的博客

    2017-08-02 12:00

  • 权限管理学习 一、ASP.NET Forms身份认证 - 农码一生

    权限管理学习 一、ASP.NET Forms身份认证 - 农码一生

    2017-08-01 11:02

网友点评
a