canvas实例 扫地僧 北邮 web 前端课程之 Canvas 画布(6)

如果你想要绘制一条从 (3,1) 到 (3,5)，宽度是 1.0 的线条，你会得到像第二幅图一样的结果。实际填充区域（深蓝色部分）仅仅延伸至路径两旁各一半像素。而这半个像素又会以近似的方式进行渲染，这意味着那些像素只是部分着色，结果就是以实际笔触颜色一半色调的颜色来填充整个区域（浅蓝和深蓝的部分） 。

要解决这个问题，你必须对路径施以更加精确的控制。已知粗 1.0 的线条会在路径两边各延伸半像素，那么像第三幅图那样绘制从 (3.5,1) 到

(3.5,5) 的线条，其边缘正好落在像素边界，填充出来就是准确的宽为 1.0 的线条。

对于那些宽度为偶数的线条，每一边的像素数都是整数，那么你想要其路径是落在像素点之间 (如那从 (3,1) 到 (3,5)) 而不是在像素点的中间。

如果不是的话，端点上同样会出现半渲染的像素点。

12.3.5 阴影(shadows)

有关阴影的四个全局属性将影响所有的绘画操作。有关定义如下：

context . shadowBlur [ = value ]

// 返回或设置阴影模糊等级， 非大于 于等于 0 的值被忽略；

context . shadowColor [ = value ]

// 返回或设置阴影颜色

context . shadowOffsetX [ = value ]

context . shadowOffsetY [ = value ]

// 返回或设置阴影的偏移量

注意：上面的值均不受坐标转换的影响，可以看做是绝对值。

在上面的例子中增加下列语句，可以得到设置阴影的图像：

context.shadowBlur=7;

context.shadowColor='rgb(200,0,0)';

context.shadowOffsetX = 3;

context.shadowOffsetY=3;

12.3.6 简单矩形

形状的绘制不影响当前路径(path)，形状是剪切区域的主题，也是阴影(Shadow)效果，全局透明(alpha)，全局组合(composition)操作等的主题。canvas实例

其由下面三个方法来进行简单的操作：

context . clearRect ( x , y , w , h )

// 在给定的矩形内清除所有的像素黑 为透明黑(transparent black)

context . fillRect ( x , y , w , h )

// 用当前的填充风格填充给定的区域

context . strokeRect ( x , y , w , h )

// 使用当前给定的线风格，绘制一个盒子区域， 影响其绘制风格的有：

strokeStyle， lineWidth，lineJoin，miterLimit。

12.3.7 复杂的路径-Paths

绘图上下文总有一个当前路径，并且是仅此一个，它不是绘图状态的一部分。

一个路径有 0 个或多个子路径列表。每个子路径包含一个或多个点列表（这些点组成直的或弯曲的线段） ，和一个标识子路径是否闭合的标志。少于两个点的子路径在绘图时被忽略。操作这些形状的方法稍微多些，如下所

示：

默认情况下，图形上下文的路径有 0 个子路径。

(1) 路径起始函数

调用格式

context . beginPath() // 清空子路径

context . closePath() // 闭合路径

方法概述：

beginPath 方法重设绘图上下文的子路径列表，并清空所有的子路径。 closePath 方法在绘图上下文如果没有子路径时，什么也不做；否则，它先把最后一个子路径标示为闭合，然后建立一个包含最后子路径的第一个

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-64819-6.html