canvas画布-点击爆破_网站前端开发_前端开发者

网站前端开发_前端开发者丨HTML5

https://www.rokub.com

html 代码

 

添加一个画布的复制过程,的原因应该是因为canvas画布从video那里获取数据不是那么地顺畅。

###2.接下来熟悉一下canvas
MDN关于canvas的介绍
首先要熟悉的是canvas的基础方法和属性w3链接
在这个案例用到的有
getContext(“2d”)
按照官方解释的意思就是你要用canvas画布一定要执行这一步,获取一个绘画环境,好吧参数2d就是获取一个二维会话环境,未来应该会有3d吧。但是别忘了要有这一步canvas才能起作用。
drawImage
drawImage() 方法用于在画布上绘制图像、画布或视频,这个方法是最主要的方法。
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。(引自MDN)
clearRect
clearRect方法用于清空canvas的上一针动画,画下一帧。
save方法和restore方法
save方法是把当前的状态保存下来(方法把当前状态的一份拷贝压入到一个保存canvas状态的栈中。),接下来可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore 返回之前保存过的路径状态和属性(方法从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。),这样画的属性不会因为save之后执行的平移或者旋转影响下一帧的绘画。
save和restore要配对使用(restore可以比save少,但不能多),如果restore调用次数比save多,会引发Error。

###3.说说主要方和思路

全局变量
html 代码

主函数
html 代码

把视屏分成根据视屏屏幕大小分成300个tile,栈用于存储每个tile的位置,旋转角度,中心等信息,用于绘制展示页面的绘制

html 代码

Tile对象用于存储每个小块的信息
html 代码

计算出点击在显示的canvas画布的位置,传递给explode方法
html 代码

接收dropBomb方法传递过来的点击位置参数,根据与点击的位置与小方格地远近程度来判断爆破后位置的移动信息
html 代码

最主要的绘制方法(一帧一帧地一个一个小格地绘制页面)
html 代码

网站前端开发_前端开发者丨HTML5

https://www.rokub.com

» 本文来自:前端开发者 » 《canvas画布-点击爆破_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2501.html
» 您也可以订阅本站:https://www.rokub.com
赞(2)
64K

评论 抢沙发

评论前必须登录!