HTML5 Canvas 龟羊赛跑
从一张图上截取不同图块,动态显示在canvas上,形成赛跑的效果。完整代码图片下载请点击 https://files.cnblogs.com/files/xiandedanteng/turtleSheepRace.rar:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>龟羊赛跑</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="1000px" height="150px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById('myCanvus'); canvas.width=1000; canvas.height=150; var context=canvas.getContext('2d'); var img=new Image(); img.src="walkingAnimals.jpg"; // 乌龟图块坐标 var turtleCds=[ {'x':'10','y':'10','width':'110','height':'80'}, {'x':'120','y':'10','width':'110','height':'80'}, {'x':'230','y':'10','width':'110','height':'80'}, {'x':'340','y':'10','width':'110','height':'80'}, ]; // 绵羊图块坐标 var sheepCds=[ {'x':'10','y':'100','width':'110','height':'100'}, {'x':'120','y':'100','width':'100','height':'100'}, {'x':'224','y':'100','width':'110','height':'100'}, {'x':'330','y':'100','width':'110','height':'100'}, ]; loop=setInterval(function(){ run(context,img,turtleCds,sheepCds); }, 100); }; var turtleSpeed=-80; var sheepSpeed=-100; var i=0; function run(context,img,turtleCds,sheepCds){ context.clearRect(0,0,1000,150);// clearScreen context.strokeStyle = "black"; turtleSpeed++; if(turtleSpeed-80>1000){ turtleSpeed=-80; } i=turtleSpeed % 4; sheepSpeed+=1.5; if(sheepSpeed-100>1000){ sheepSpeed=-100; } // 截取一块图贴上 context.drawImage(img,turtleCds[i].x,turtleCds[i].y,turtleCds[i].width,turtleCds[i].height,turtleSpeed,50,turtleCds[i].width,turtleCds[i].height); context.drawImage(img,sheepCds[i].x,sheepCds[i].y,sheepCds[i].width,sheepCds[i].height,sheepSpeed,50,sheepCds[i].width,sheepCds[i].height); } //--> </script>
HTML5 Canvas 龟羊赛跑的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
随机推荐
- js判断中出现两个!!是什么意思?
在js中看源码时有时候出现两个!!,我起初以为是js的其他语法,其实!!就是两次取“非”的运算. 下面证明我的说法. alert(null);//false alert(!null);//true a ...
- jstl标签forEach的用法--遍历java的集合
再讲<c:forEach>之前,现讲一下让EL表达式生效的语句 <% @ page isELIgnored="false"%>这句语句在你想让EL表达式生效 ...
- hdu 4388 Stone Game II sg函数 博弈
Stone Game II comes. It needs two players to play this game. There are some piles of stones on the d ...
- Topcoder SRM 600 div1题解
日常TC计划正式启动! Easy(250pts): 题目大意:给你一个集合,里面一堆数,初始数为0,给你一个目标数,你可以选择集合中若干个数进行OR操作来得到目标数.问至少删去多少个数,使得你永远无法 ...
- 安卓SDK安装时出现的小问题
在SDK Manager启动安装后出现网页不能访问的错误 错误日志如下 Fetching URL: https://dl-ssl.google.com/android/repository/repos ...
- django中的类视图
# 原创,转载请留言联系 当我们在开发一个注册模块时.浏览器会通过get请求让注册表单弹出来,然后用户输完注册信息后,通过post请求向服务端提交信息.这时候我们后端有两个视图函数,一个处理get请求 ...
- Android 横向列表GridView 实现横向滚动
Android 横向列表实现,可左右滑动,如下图 1.主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件b.G ...
- AC日记——[国家集训队2011]旅游(宋方睿) cogs 1867
[国家集训队2011]旅游(宋方睿) 思路: 树链剖分,边权转点权: 线段树维护三个东西,sum,max,min: 当一个区间变成相反数时,sum=-sum,max=-min,min=-max: 来, ...
- Netty源码学习(一)Netty线程模型
给你一台4路E7-4820V2(32核心64线程),512G内存的服务器,你该如何编程才能支持百万长连接? 最直接的想法是采用BIO的模式,为每个连接新建一个线程,在一一对应的线程中直接处理连接上的数 ...
- Netty源码学习(五)ChannelInitializer
0. ChannelInitializer简介 直接用ChannelInitializer的注释吧:A special ChannelInboundHandler which offers an ea ...