js+ canvas 实现人物走动
在网上看了一篇管道工玛利亚走动的图片,感觉人物走动的太生涩了,就写了一下代码改动一下:
js 代码:
//定义数组图片集合
var marios = new Array("image/QQ截图20141119164825.png", "image/QQ截图20141119164845.png", "image/QQ截图20141119164908.png");
var mario = new Image();
var canvas;
var ctx;
var i = -1;
var num = 0; function init() {
//alert("----------")
setInterval("draw()", 200);
} function draw() {
i++;
//alert(i)
mario.src = marios[i];
//alert(mario)
canvas = document.getElementById("mycanvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 400, 100)
ctx.drawImage(mario, num, 0);
num += 10;
if (num == 400) {
num = 0;
}
if (i == 2) {
i = -1;
}
}
html代码:
<body onload="init()">
<canvas id="mycanvas" width="400" height="100" style="border: 1px solid #888888;"></canvas>
</body>
图片:
js+ canvas 实现人物走动的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 利用js+canvas实现的时钟效果图
canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...
- <Win32_18>平滑的人物走动 —— 解决闪屏
今天咋一看,发现很久没写博客了 的确,开学之后,写博客的时间越来越少了…… 今天来做一个比较实用的小应用——平滑的人物走动,同时解决常见的闪屏问题.实现透明位图 这些技术在游戏开发中是很常见的 --- ...
- 转 原生js canvas实现苹果电脑mac OS窗口最小化效果
http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458 很多资料 ,前 ...
- js canvas游戏初级demo-躲避障碍物
在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- chart.js & canvas
chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...
- Atitit js canvas的图像处理类库attilax总结与事业
Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...
- js canvas captcha
js canvas captcha https://thejackalofjavascript.com/building-a-captcha-using-html5-canvas/ https://a ...
随机推荐
- hdoj--2119--Matrix(最小点覆盖)
Matrix Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- SwiftUI 官方教程(二)
SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...
- Java单例模式解析(收藏)
在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在.就 ...
- [hihocoder][Offer收割]编程练习赛43
版本号排序 不知道什么傻逼原因,就是过不了 #pragma comment(linker, "/STACK:102400000,102400000") #include<st ...
- Codeforces Round #447
QAQ #include<stdio.h> #include<string.h> #include<stdlib.h> #include<vector> ...
- 创建异步对象XHR的兼容写法、get、post上传数据的方式
兼容ie7以下,创建异步对象的函数 function creatXHR(){ if(typeof XMLHttpRequest != "undefined"){ return ne ...
- 用来生成get set string 方法
https://projectlombok.org/ 主要是用来生成get set string 方法等等 原理是注解
- What's Dead & Exploded in Swift's exception stack?
The Swift compiler marks function arguments for a number of reasons, mostly related to internal opti ...
- webstorm主题网址
http://www.phpstorm-themes.com/ http://www.riaway.com/theme.php
- linux笔记常用命令
LINUX成长日记 1.本人工作实例:(将一台服务器的数据库复制到另外一台服务器上) scp -r -P 8351 /bak_mysql/sz_b2b2c201705180200.sql root@1 ...