网页设计作业中的样式与颜色_学生网页设计制作作业_网页制作作业成品_网页设计作业_计算机毕业设计_php作业_asp作业_网页模板

热点资讯更多

网页设计作业中的样式与颜色

我们在制作网页设计作业时，运用样式与颜色是必须的，下面是对样式与颜色的介绍

fillStyle 和 strokeStyle属性
如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和strokeStyle。这两个属性的定义方法如下所示。
fillStyle = color
strokeStyle = color
strokeStyle 是用于设置图形轮廓的颜色，而 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 = transparency value
这个属性影响到 canvas 里所有图形的透明度，其有效的值范围是0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效例17.9 下面通过一个示例来了解一下globalAlpha属性的应用。本例中用四色格作为背景，设置 globalAlpha 为 0.3后，在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，背景图的中心部分会完全消失。

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

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

上一篇：html5网页设计作业中画布中使用路径

下一篇：网页设计作业中绘制渐变图形

分享到： QQ空间新浪微博腾讯微博人人网更多