|
|||
|
摘要：
线型 Line styles可以通过一系列属性来设置线的样式。lineWidth = valuelineCap = typelineJoin = typemiterLimit = value我会详细介绍这些属性，不过通过以下的样例可能会更加容易理解。lineWidth 属性的例子这 个属性设置当前绘线的粗细。属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。因为画 布的坐标并不和像素直接对应，当需要获得精确的水平或垂直线的时候要特别注意。在下面的例子中，用递增的宽度绘制了10条直线。最左边的线宽1.0单位。 并且，最左边的以及所有宽 阅读全文
posted @ 2011-10-01 16:52 Minakata 阅读(325) 评论(0) 推荐(0) 编辑
摘要：
到目前为止，我们只看到过绘制内容的方法。如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。fillStyle = colorstrokeStyle = colortrokeStyle 是用于设置图形轮廓的颜色，而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下，线条和填充颜色都是黑色(CSS 颜色值 #000000)。您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。 // 这些 fillStyle 的值均为 阅读全文
posted @ 2011-10-01 16:15 Minakata 阅读(565) 评论(0) 推荐(0) 编辑
摘要：
Canvas 相当有趣的一项功能就是可以引入图像，它可以用于图片合成或者制作背景等。而目前仅可以在图像中加入文字（标准说明中并没有包含绘制文字的功能）。只要是Gecko支持的图像（如 PNG，GIF，JPEG等）都可以引入到 canvas 中，而且其它的 canvas 元素也可以作为图像的来源。引入图像 importing images引入图像只需要简单的两步：第一当然是来源图片，不是简单的 URL 路径，但可以是一个 JavaScript 的 Image 对象引用，又或者其它的 canvas 元素。然后用 drawImage 方法将图像插入到 canvas 中。先来看看第一步，基本上有四种可 阅读全文
posted @ 2011-10-01 10:20 Minakata 阅读(342) 评论(0) 推荐(0) 编辑
摘要：
贝塞尔和二次方曲线Bezier and quadratic curves接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)上面两行代码的区别见右图。它们都有一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和 cp 阅读全文
posted @ 2011-10-01 09:29 Minakata 阅读(444) 评论(0) 推荐(0) 编辑 |
|||
