canvas绘图基本使用方法(三)
canvas绘图基本使用方法(三)
转载至博客http://blog.csdn.net/u014607184/article/details/51746384
诗渊
文字渲染
与文本渲染有关的主要有三个属性以及三个方法：
属性 | 描述 |
|---|---|
font | 设置或返回文本内容的当前字体属性 |
textAlign | 设置或返回文本内容的当前对齐方式 |
textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
方法 | 描述 |
|---|---|
fillText() | 在画布上绘制”被填充的”文本 |
strokeText() | 在画布上绘制文本（无填充） |
measureText() | 返回包含指定文本宽度的对象 |
上述的属性和方法的基本用法如下：
效果如下：
其他属性和方法
阴影绘制：
- shadowColor 设置或返回用于阴影的颜色。
- shadowBlur 设置或返回用于阴影的模糊级别（数值越大越模糊）。
- shadowOffsetX 设置或返回阴影与形状的水平距离。
- shadowOffsetY 设置或返回阴影与形状的垂直距离。
我们为之前绘制的五角星添加一下阴影
效果如下：
图形组合：
- globalAlpha： 设置或返回绘图的当前 alpha 或透明值 该方法主要是设置图形的透明度，这里就不具体介绍。
- globalCompositeOperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：
值 | 描述 |
|---|---|
source-over | 在目标图像上显示源图像（默认） |
source-atop | 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的 |
source-in | 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的 |
source-out | 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的 |
destination-over | 在源图像上显示目标图像 |
destination-atop | 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的 |
destination-in | 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的 |
destination-out | 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的 |
lighter | 显示源图像 + 目标图像 |
copy | 显示源图像。忽略目标图像 |
xor | 使用异或操作对源图像与目标图像进行组合 |
下面是一个小示例，可以通过点击改变组合效果：
读者可以点击标签来观察不同的组合效果，效果如下：
剪辑区域：
clip()方法从原始画布中剪切任意形状和尺寸。 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法） 以下是用一个圆去截取一个矩形的示例：
除了上述的属性的和方法，还有以下等方法：
drawImage()： 向画布上绘制图像、画布或视频。
toDataURL() ：保存图形
isPointInPath()： 如果指定的点位于当前路径中，则返回 true，否则返回 false。
这里就不逐个举例说明了。
sdzfgdhg
本文分享自 javascript艺术 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ，欢迎热爱写作的你一起参与！
腾讯云开发者
