Canvas系列教程二：矩形和线条的绘制

[日期：2012-02-19]    来源：HTML5中文网     作者：admin    [字体：]    阅读： 次

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘…

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 Canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子：

JavaScript Code复制内容到剪贴板

此例子效果图见下图

路径

通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。下面是一个绘制三角形的例子:

JavaScript Code复制内容到剪贴板

其效果图见下图

另一个较复杂的例子中使用了直线、曲线和圆弧。

感谢您对【51运维网 】的支持，我们为您免费提供《Canvas系列教程二：矩形和线条的绘制》技术文章，《Canvas系列教程二：矩形和线条的绘制》详细使用和说明，有时《Canvas系列教程二：矩形和线条的绘制》可能不完善、敬请谅解！如果《Canvas系列教程二：矩形和线条的绘制》有错误请给我们留言，我们将尽快修复文章错误，如果您觉得本站不错，请分享给周围的朋友！谢谢！