html5从入门到精通章运用与颜色.pptxVIP

运用样式与颜色本讲大纲：1、fillStyle和strokeStyle属性支持网站：2、透明度globalAlpha3、线型Linestyles

fillStyle和strokeStyle属性如果想要给图形上色，有两个重要的属性可以做到：fillStyle和strokeStyle。这两个属性的定义方法如下所示。fillStyle=colorstrokeStyle=colorstrokeStyle是用于设置图形轮廓的颜色，而fillStyle用于设置填充颜色。color可以是表示CSS颜色值的字符串、渐变对象或者图案对象。默认情况下，线条和填充颜色都是黑色(CSS颜色值#000000)。这里需要注意的是如果自定义颜色则应该保证输入符合CSS颜色值标准的有效字符串。下面的代码都是符合标准的颜色表示方式，都表示同一种颜色（橙色）。context.fillStyle=orange;context.fillStyle=#FFA500;context.fillStyle=rgb(255,165,0);context.fillStyle=rgba(255,165,0,1);

透明度globalAlpha通过设置globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式来绘制透明或半透明的图形。globalAlpha属性定义代码如下所示：globalAlpha=transparencyvalue这个属性影响到canvas里所有图形的透明度，其有效的值范围是0.0（完全透明）到1.0（完全不透明），默认是1.0。globalAlpha属性在需要绘制大量拥有相同透明度的图形时相当高效。例17.9下面通过一个示例来了解一下globalAlpha属性的应用。本例中用四色格作为背景，设置globalAlpha为0.3后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。

线型Linestyles线型包括如下属性：lineWidth=valuelineCap=typelineJoin=typemiterLimit=value通过这些属性来设置线的样式。下面将结合实例来讲解一下各属性的应用及应用后的效果。lineWidth属性该属性设置当前绘线的粗细，属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。

线型LinestyleslineCap属性该属性决定了线段端点显示的样子。它可以为下面的三种值之一：butt，round和square，默认是butt。lineJoin属性该属性值决定了图形中两线段连接处所显示的样子。它可以是以下三种值之一：round,bevel和miter。默认是miter。

Thankyou还有什么疑问可以到提出也可以发送邮件到