《HTML5游戏编程核心技术与实战》一2.6 其他全局属性

2.6 其他全局属性

HTML5游戏编程核心技术与实战
在context中还有一些常见的全局属性,做一些了解。

  • globalAlpha:透明度,这个值用来设置在画布上绘制的透明度,值的范围从0~1之间,使用这个属性我们可以完成一些常见的效果,比如游戏中常见的淡入淡出效果。

以下代码展示了一张图片淡入,也就是逐渐显示的效果。

globalCompositeOperation:全局混合模式,这个属性定义了如果在画布上绘制多个图像时,图像进行叠加的方式,也称为混合模式,类似于Photoshop这种图像处理软件中图层的叠加模式。表2-4列出了混合模式的可能值,表2-4中,正方形表示目标图像,圆形表示源图像。

时间: 2024-08-01 18:06:35

《HTML5游戏编程核心技术与实战》一2.6 其他全局属性的相关文章

《HTML5游戏编程核心技术与实战》——2.6 其他全局属性

2.6 其他全局属性 在context中还有一些常见的全局属性,做一些了解. globalAlpha:透明度,这个值用来设置在画布上绘制的透明度,值的范围从0-1之间,使用这个属性我们可以完成一些常见的效果,比如游戏中常见的淡入淡出效果. 以下代码展示了一张图片淡入,也就是逐渐显示的效果. <body> <h2>淡入</h2> <img src="img/t1.jpg" id="img1" style="displ

《HTML5游戏编程核心技术与实战》一2.2 图形API

2.2 图形API HTML5游戏编程核心技术与实战 创建canvas和获取了canvas的环境上下文之后,就可以开始进行绘图了.绘图的方式有两类:一类是进行图形操作,另一类是图像操作.本小节主要涉及图形相关的API,要使用canvas的API进行绘图,通常需要进行下列步骤. (1)获取canvas元素.通过document.getElementById()取得元素. (2)获取canvas元素的环境上下文.通过canvas.getContext ("2d")获取2D图像上下文. (3

《HTML5游戏编程核心技术与实战》一2.1 基本知识

2.1 基本知识 HTML5游戏编程核心技术与实战在HTML4时代,不安装插件的情况下,基于浏览器的绘图组件是最初由微软向W3C递交的VML(Vector Markup Language矢量标记语言)技术,但未被W3C采纳,只能在IE5.0及其后续版本中使用,后来VML和PGML(由Adobe和SUN提出)合并成SVG(Scalable Vector Graphics,可伸缩矢量图形)规范.SVG技术是基于XML的矢量图形绘制技术,对于普通的图像应用来说足够,但是对于性能要求较高的游戏渲染来说,

《HTML5游戏编程核心技术与实战》一2.4 坐标变换

2.4 坐标变换 HTML5游戏编程核心技术与实战在绘制图像的过程中,经常可能需要对图像进行旋转.缩放等变形处理,canvas也提供了一系列的API帮助我们完成这些操作. 关于画布的坐标变换,canvas提供了以下常用的API,这些API的操作必须要在绘制之前调用,否则不会产生任何效果. translate (x, y):平移,把画布的原点坐标移动到(x, y)位置,x表示将坐标原点向左移x个像素,y表示将坐标原点向下移动y个像素.正常情况下canvas的原点坐标位于左上角,那么我们可以通过tr

《HTML5游戏编程核心技术与实战》一导读

前 言 HTML5游戏编程核心技术与实战为什么写这本书对游戏的热爱使我萌发了写书的念头.漫画和电子游戏是童年最美好的回忆,任天堂的红白机陪伴着我度过了童年最快乐的时光,20世纪80年代,大街小巷的街机室成了孩子们快乐的天堂.随着时光流逝,许多经典的游戏画面已成为过去,但对游戏的热情依然不减,希望能借此书得以慰藉逝去的青春.青春不在,游戏热血永存! IT技术可谓日新月异,要想不被社会淘汰,就必须要不断学习,不断充实自己.HTML5是Web技术中提出的新规范.新生的HTML5技术虽然目前还不十分成熟

《HTML5游戏编程核心技术与实战》一2.8 小结

2.8 小结 HTML5游戏编程核心技术与实战本章介绍了canvas的一些常用的操作,作为HTML5的最重要的特性,canvas使得在Web中开发免插件的较高性能的游戏提供了条件,接下来的第3章中,我们介绍HTML5中的多媒体元素.

《HTML5游戏编程核心技术与实战》一2.5 绘制文字

2.5 绘制文字 HTML5游戏编程核心技术与实战canvas中除了可以绘制图形图像外,还可以绘制文字,同时也可以指定文字的字体.大小.对齐方式以及填充文字的纹理. fillText (text, x, y, [maxWidth]):在canvas上填充文字,text表示需要绘制的文字,x.y分别表示绘制在canvas上的横.纵坐标,最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出.strokeText (text, x, y, [maxWidth]):在canvas上描边文字,参数的

《HTML5游戏编程核心技术与实战》一2.7 案例:《你画我猜》

2.7 案例:<你画我猜> HTML5游戏编程核心技术与实战在这一小节中,我们将利用前面介绍的知识,来创作一个<你画我猜>游戏中的主要功能.<你画我猜>是一款老少皆宜的多人在线的网络游戏,2012年风靡一时,玩法其实也来源于生活当中,经常在娱乐节目中出现.通常在节目中是这样玩的,主持人写出一个词语,然后由一个参与者根据这个词语画出相应的图案,由另一个参与者来根据这个图案猜出这个词语,而<你画我猜>就把现实生活中的这个玩法转到了电脑上,玩法就是这么简单.当然,

《HTML5游戏编程核心技术与实战》一1.1 网页游戏和HTML5

1.1 网页游戏和HTML5 HTML5游戏编程核心技术与实战 1.1.1 网页游戏简介 从电子游戏载体来说,电子游戏现在基本上分成了3个主要的阵营:第一部分是以电视游戏为主,第二部分以个人电脑游戏为主,第三部分是以手机和平板为主.而从游戏的玩家数量来说,游戏经历了从单机游戏时代到现在的网络游戏时代.随着互联网的普及,以及电脑硬件的飞速发展,互联网游戏正处于高速发展的时期,特别是网页游戏得到了空前的发展. 网页游戏也称Web Game,是一种无端网游,和<魔兽>系列.<星际>系列等