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 ...
随机推荐
- BZOJ 1196 二分+Kruskal
思路: 二分答案 判一下能不能加 //By SirisuRen #include <cstdio> #include <cstring> #include <algori ...
- 关于React-native的介绍以及环境搭建
React-Native介绍(后面内容的RN就是指react-native) 由facebook公司推出的,基于react,能开发原生app 原理: 1. 利用react框架写好js代码 2. 利用p ...
- Java基础2一基础语法
1.标识符 定义:在Java中给类名.方法名.包名,参数名等命名时使用的字符序列即标识符 规则: 由字母.数字.下划线和$符组成 不能以数字开头 长度无限制 严格区分大小写 不能是java中的保留关键 ...
- tensorflow冻结层的方法
其实常说的fine tune就是冻结网络前面的层,然后训练最后一层.那么在tensorflow里如何实现finetune功能呢?或者说是如何实现冻结部分层,只训练某几个层呢?可以通过只选择优化特定层的 ...
- Python编程Web框架 :Django 从入门到精通
Django是一个高级别的Python Web框架,它鼓励快速开发和干净实用的设计. 现在我们开始学习它. Django学习之 第一章:Django介绍 Django学习之 第二章:Django快速上 ...
- css3动画简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android图片剪裁库
最近利用一周左右的业余时间,终于完成了一个Android图片剪裁库,核心功能是根据自己的理解实现的,部分代码参考了Android源码的图片剪裁应用.现在将该代码开源在Github上以供大家学习和使用, ...
- android黑科技系列——实现静态的默认安装和卸载应用
一.访问隐藏的API方式进行静态的默认安装和卸载 1.系统安装程序 android自带了一个安装程序—/system/app/PackageInstaller.apk.大多数情况下,我们手机上安装应用 ...
- facebook atc弱网环境搭建和踩坑总结
facebook atc介绍 Augmented Traffic Control(又名atc)是一种模拟网络状况的工具.由facebook开源,是一个允许开发人员控制设备与互联网连接的项目.atc可以 ...
- 解决value toDF is not a member of org.apache.spark.rdd.RDD (spark2.1 )
解决上述办法有两点: 1.两个import 需要放在 hiveCtx之后. val hiveCtx: SparkSession = SparkSession.builder.config(conf). ...