前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >canvas绘图基本使用方法(三)

canvas绘图基本使用方法(三)

作者头像
javascript艺术
发布2021-05-28 13:56:52
9980
发布2021-05-28 13:56:52
举报
文章被收录于专栏:javascript艺术

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 javascript艺术 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • canvas绘图基本使用方法(三)
    • 转载至博客http://blog.csdn.net/u014607184/article/details/51746384
      • 文字渲染
        • 其他属性和方法
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档