canvas教程

HTML5 Canvas入门(七)

字号+ 作者:H5之家 来源:H5之家 2017-03-17 14:00 我要评论( )

这是本系列的最后一篇入门文章,主要是对剩余的未说明的canvas方法来逐个介绍。首先,如果你是一名擅长矢量设计的设计师,对Illustrator或者Fireworks很熟悉的话

这是本系列的最后一篇入门文章,主要是对剩余的未说明的canvas方法来逐个介绍。

首先,如果你是一名擅长矢量设计的设计师,对Illustrator或者Fireworks很熟悉的话,那你肯定知道它们有一个很强大的矢量混合处理功能,可以对多个矢量路径进行“合并”、“拆分”、“结合”、“相交”等系列操作。 如下图,在Fireworks中有三个矢量路径,我先把灰色的圆形和粉红色的矩形进行了“结合路径”的处理,接着又把结合后的路径跟绿色的星形矢量进行了“合并路径”操作:

在canvas中也有实现同样功能的属性—— globalCompositeOperation,利用它,可以实现对画布上已有的图像(暂称为“目标图像”)和新绘制的图像(暂成为“源图像”)来执行相关的混合处理。

globalCompositeOperation的可取值见下表:

值描述

source-over 默认。在目标图像上显示源图像。

source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示,目标图像是透明的。

source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分,目标图像是透明的。

destination-over 在源图像上方显示目标图像。

destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示,源图像是透明的。

destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。

lighter 显示源图像 + 目标图像。

copy 显示源图像。忽略目标图像。

xor 使用异或操作,对源图像与目标图像进行结合处理。

我们绘制一个蓝色的圆形和一个粉红色的矩形,对它们进行类似上图“结合路径”(xor)的处理:

<canvas> 您的浏览器不支持canvas,建议使用最新版的Chrome </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.arc( 80, 80, 40, 0, 2*Math.PI); ctx.fillStyle = "#4DA6FF"; ctx.fill(); ctx.fillStyle = "#FF7373"; ctx.globalCompositeOperation="xor"; //异或结合处理 ctx.fillRect(95,50,100,90); </script>

效果如下:

各globalCompositeOperation 属性值的最终效果可以参考下图(蓝色矩形为目标图像,红色圆形为后续新绘制的源图像):

接着介绍 isPointInPath() 方法,它接受一个指定点的坐标值作为参数,可判断该指定点是否位于当前路径内,并返回对应的Boolean值。
我们来绘制一个矩形,然后判断点(115, 70)是否位于该矩形路径内部,如果是,则填充该矩形,否则alert出相关信息:

<script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.rect(95,50,100,90); if (ctx.isPointInPath(115,70)){ //判断点(115,70)是否位于当前路径内 ctx.fillStyle = "#FF7373"; ctx.fill(); }else{ alert("不在矩形路径内"); } </script>

由于该点是位于矩形路径上的,故成功绘制矩形,而不会弹窗:

 我们常规使用canvas绘制多个图片的时候,总有一些会重复使用到的状态,比如我们先绘制了一个“倾斜20度、填充颜色为红色”的矩形,接着绘制了一个“不倾斜、填充颜色为蓝色”的矩形。如果后面我们又要重复绘制一个“倾斜20度、填充颜色为红色”的矩形,又得重新设置画布的setTransform和fillStyle值,自然是挺烦人的事情。
canvas的 save() 和 restore() 方法便能为我们处理这个问题——使用 .save() 方法能为我们保存当前画布的状态,使用 .restore() 方法可以把当前画布状态返回到上一次保存的状态,有点类似于我们玩游戏过程中存档和读档的功能。
我们先说说canvas的“状态”,它指的是像我们上面提到的“倾斜(变形)、填充”这样的配置,是当前所有样式和变形的一个快照。我们可以保存和读取到的状态包括:

当前的 transformation matrix;
当前的 clipping region;
当前的属性值:fillStyle, font, globalAlpha,
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,
textBaseline

canvas的状态是以栈(stack)的方式保存的,遵循先进后出(FILO)原则。每一次调用 save 方法,当前的状态就会被推入栈中保存起来;当调用 restore 方法时,最新入栈的状态则被推出使用。
我们来一个简单的例子:

<canvas> 您的浏览器不支持canvas,建议使用最新版的Chrome </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(20,20,100,100); ctx.save(); //保存状态(fillStyle = "green") ctx.fillStyle = "red"; ctx.fillRect(40,40,60,60); ctx.restore(); //读取上次保存的状态(fillStyle = "green") ctx.fillRect(60,60,20,20); //填充了绿色的矩形而非红色的 </script>

效果如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 干货分享 超炫丽的HTML5/jQuery应用及代码

    干货分享 超炫丽的HTML5/jQuery应用及代码

    2017-03-15 16:01

  • HTML5教程画布Canvas基础知识讲解,html5学习网

    HTML5教程画布Canvas基础知识讲解,html5学习网

    2017-03-14 09:01

  • HTML5 - 使用Canvas做一个在线画图程序(支持把画布保存为图像)

    HTML5 - 使用Canvas做一个在线画图程序(支持把画布保存为图像)

    2017-03-14 08:01

  • HTML5之绘图标签canvas

    HTML5之绘图标签canvas

    2017-03-13 11:01

网友点评
s