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" ...
随机推荐
- javascript 中 click 和onclick有什么区别呢
<script type="text/javascript"> $(function(){ $("#btn4").click(function(){ ...
- Linux的系统级性能剖析工具-perf
一直在找个靠谱且易用的性能分析工具,perf 貌似是很符合要求的,先给出阿里整理的几篇文档: Linux的系统级性能剖析工具-perf-1.pdf Linux的系统级性能剖析工具-perf-2.pdf ...
- javascript验证前端页面
数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...
- Python学习杂记_13_模块(一)_基础
一.模块和模块调用 模块其实就是一个Python文件,模块的调用实际就是把这个Python文件从头到尾执行一遍. 如果是在相同路径下的调用: 1. 先导入整个模块,然后引用模块中的方法 import ...
- python爬虫beautifulsoup4系列2【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/beautifulsoup4/ 前言 本篇详细介绍beautifulsoup4的功能,从 ...
- pythontips(1):打印模块的属性并执行
import sys import site def print_all(module_): modulelist = dir(module_) length = len(modulelist) fo ...
- 开发API完成,写个文档
Jira对接Prism开发API指南 部门 证系统运维团队 文档制作人 陈刚() 时间 2017-04-05 版本 第一版 目录 目的... 1 通例:... 1 认证... 2 新建版本单... 2 ...
- 程序员利用javascript代码开发捕鱼游戏
面试这么成功,全靠这个捕鱼游戏来完成,看的就是里面javascript代码,所以说前端最重要的还是javascript这一关,不管是现在HTML5时代还是以后如何,javascript永远不会落后,大 ...
- 01背包【p1060】开心的金明
Description 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要 ...
- 使用after伪类,配合IE的zoom或者overflow清除浮动
用after伪类实现,兼容多种浏览器:.clearfix:after {content:"."; display:block; height:0; clear:both; visi ...