<canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口)。 属性 <canvas>只有width和height两个属性。如果没有设置width和height属性,canvas的默认 ...
分类:
其他好文 时间:
2017-07-25 19:53:48
阅读次数:
132
1、需求分析 3个场景: * 开机场景:启动程序,在游戏开始前,给用户做准备,并提示如何操作游戏 * 游戏场景:游戏运行中的场景 * 结束场景:当用户胜利、失败或退出时的场景,并提示用户在游戏中的得分 游戏场景是整个游戏的核心,包括: 一块画布 一条蛇 一个蛇头 一个不定长的蛇尾 一个水果 边界 障 ...
分类:
其他好文 时间:
2017-07-25 15:51:35
阅读次数:
152
<canvas> - 定义使用 JavaScript 的图像绘制。 p.s. 无法使用CSS为画布设置大小,要么在<canvas>中使用width和height单独定义,要么在js中设置。canvas的默认画布大小为300×150。 getContext是DOM对象的方法,也就是原生js方法,不能用 ...
分类:
Web程序 时间:
2017-07-24 14:43:09
阅读次数:
214
有一些点需要注意: 1,创建画布,imagecreatetruecolor() 配置颜色,imagecolorallocate()2,用矩形填充画布,imagefilledrectangle()3,把TrueType文本写入图像,imagettftext()4,添加干扰点,imagesetpixel ...
分类:
Web程序 时间:
2017-07-23 18:20:47
阅读次数:
202
贪吃蛇游戏的设计步骤: Part 1: 设计游戏图纸 画出900*700的白色窗口 在窗口上添加画布 在画布上添加标题 在画布上添加黑色游戏区 Part 2: 放置静态的蛇:一个头、两个身体 加上开始提示:按空格键开始游戏 让蛇动起来:监听Timer事件,平移数据 实现游戏暂停 实现转向功能 Par ...
分类:
编程语言 时间:
2017-07-20 23:48:15
阅读次数:
551
一、 <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。 canvas 拥有多种绘制 ...
分类:
Web程序 时间:
2017-07-20 10:11:12
阅读次数:
199
一、需求: 1.在自定义的画布中实现可缩放手势,摇一摇可对控件进行整理排序; 2.画布中可以添加位置设定的控件,控件可以响应点击、长按、拖动事件; 3.控件A长按事件会隐藏画布中的控件除了A之外,显示另一个控件B;当A在在底层画布中拖动,拖动结束之后回到原画布;当A移动B的位置范围响应操作(可以添加 ...
分类:
移动开发 时间:
2017-07-17 22:08:02
阅读次数:
311
布局,这个在服务端变成是没有的,也是服务端的人学习client的一道坎吧。 曾经用cocos2d-x写小游戏的时候就是这个非常难懂,或者能用,可是理解不多的话,非常难写出好的布局,难以适合商业化的应用。 游戏的布局有点像用photoshop画画的感觉。现有一个场景的概念,就像一个画布,然后上面分一层 ...
分类:
移动开发 时间:
2017-07-16 19:29:41
阅读次数:
270
4.1 缩放 scale() 方法缩放当前绘图,更大或更小 语法:context.scale(scalewidth,scaleheight) scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) scaleheight : 缩放当前绘图的高度 ... ...
分类:
其他好文 时间:
2017-07-16 15:48:00
阅读次数:
144