WP7 Mango HTML5开发体验(一) 实现动画效果
一.开发坏境
Microsoft Visual Studio 2010 +PhoneGap(PhoneGap是一个开源的移动框架,使开发者可以构建多个移动平台的Web应用,并且使用标准的HTML5,CSS和JavaScript)。
二.知识储备
canvas:HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
示例:
在HTML文档的body元素中包含canvas标记:
<canvas id= "canvas" width= "400" height= "300" > </canvas> |
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type= "text/javascript" > var ctx=document.getElementById( "canvas" ).getContext( '2d' ); ctx.fillStyle= "#FF0000" ; //填充红色 ctx.fillRect(0,0,150,75); //在画布上绘制 150x75 的矩形,从左上角开始 (0,0) </script> |
说明:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
梯度(gradient):HTML5中的对象类型。createLinearGradient() 返回代表线性颜色渐变的一个 CanvasGradient 对象。
createLinearGradient(xStart, yStart, xEnd, yEnd)。
xStart, yStart 渐变的起始点的坐标。 xEnd, yEnd 渐变的结束点的坐标。
setInterval:setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法:setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必需。周期性执行或调用 code 之间的时间间隔,以毫秒计。
三、具体实现
1.打开 Microsoft Visual Studio 2010 选择 文件---新建---项目---GapAppStarter。
新建一个GapAppStarter项目。
2.打开位于www文件夹下的index.html页面,编写如下代码:
<!DOCTYPE html> <html> <head> <meta name= "viewport" content= "width=320; user-scalable=no" /> <meta http-equiv= "Content-type" content= "text/html; charset=utf-8" /> <title>Animation</title> <script type= "text/javascript" charset= "utf-8" src= "phonegap-1.1.0.js" ></script> <script type= "text/javascript" > var framex = 30; //边框左上角的x坐标 var framey = 20; //边框左上角的y坐标 var framewidth = 250; //边框宽度 var frameheight = 250; //边框高度 var ballrad = 10; //小球半径 var ballx = 20; //小球初始x坐标 var bally = 40; //小球初始y坐标 var borderr = framewidth + framex - ballrad; //右边界 var borderu = frameheight + framey - ballrad; //下边界 var bounderl = framex + ballrad; //左边界 var boundero = framey + ballrad; //上边界 var ctx; var speedx = 10; //移动速度 var speedy = 10; function init() { ctx = document.getElementById( 'canvas' ).getContext( '2d' ); ctx.lineWidth = ballrad; //设置线宽 ctx.fillStyle = "rgb(200,0,50)" ; moveball(); setInterval(moveball, 50); //定时执行 } function moveball() { ctx.clearRect(framex, framey, framewidth, frameheight); moveandcheck(); ctx.beginPath(); ctx.arc(ballx, bally, ballrad, 0, Math.PI * 2, true ); //在当前位置绘制小球 ctx.fill(); ctx.strokeRect(framex, framey, framewidth, frameheight); //绘制边框 } function moveandcheck() { var nballx = ballx + speedx; var nbally = bally + speedy; if (nballx > borderr) { //碰撞检测 speedx = -speedx; nballx = borderr; } if (nballx < bounderl) { nballx = bounderl; speedx = -speedx; } if (nbally > borderu) { nbally = borderu; speedy = -speedy; } if (nbally < boundero) { nbally = boundero; speedy = -speedy; } ballx = nballx; //更改小球坐标 bally = nbally; } </script> </head> <body onLoad= "init();" > <canvas id= "canvas" width= "400" height= "300" > </canvas> <br/> </body> </html> |
3.编译运行,在模拟器中查看运行效果:
四、总结
大家可以更改定时执行时间,在模拟器上看看运行效果,我改为16毫秒也就是XNA默认的游戏帧率(60fps)执行了一下,效果不是太好!
版权所有欢迎转载
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂