<canvas id="canvas1" width="250" height="300" style="background-color:black">
你的浏览器不支持 Canvas 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器
</canvas><br/>
帧数:<input id="txt1" type="text" value="25"/><br/>
每次移动距离:<input type="text" id="txt2" value="10"/><br/>
<input type="button" value="开始" onclick="move_box()"/>
<input type="button" value="暂停" onclick="stop()"/>
<script type="text/javascript">
//定时器
var interval=null;
//停止动画
function stop(){
clearInterval(interval);
}
//===================================================================
//基本动画
//====================================================================
function move_box(){
//停止动画
stop();
//移动速度
var delta=parseInt(document.getElementById('txt1').value);
//每秒绘制多少次
var fps=parseInt(document.getElementById('txt2').value);
//画布对象
var canvas=document.getElementById("canvas1")
//获取上下文对象
var ctx = canvas.getContext("2d");
//设置颜色
ctx.fillStyle="red";
//方块的初始位置
var x=100;var y=50;
//方块的长度和宽度
var w=30;var h=30;
//开始动画
interval = setInterval(function(){
//改变 y 坐标
y=y+delta;
//上边缘检测
if(y<0){
y=0;
delta=-delta;
}
//下边缘检测
if((y+h)>canvas.getAttribute("height")){
y=canvas.getAttribute("height")-h;
delta=-delta;
}
//清空画布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
//保存状态
ctx.save();
//移动坐标
ctx.translate(x,y);
//重新绘制
ctx.fillRect(0,0,w,h);
//恢复状态
ctx.restore();
},1000/fps);
}
</script>
分享到:
相关推荐
html5实现的动画小人
这次我们要来分享一款很酷的HTML5动画,是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车...
html实现花瓣下落动画
HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花动画特效,canvas炫彩烟火,高质量js源代码! HTML5实现五彩烟花...
前端web开发,情人节浪漫专属,表白源码。利用jquery+html5实现
flash做的资源,把效果导成了图片,JavaScript+html5实现的动画效果,
用HTML,JavaScript实现的一个简单的跳舞的机器人动画特效,有兴趣的可以看看 ,非常有意思
html5实现的页面滚动图片动画加载特效源码
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码,canvas是HTML5特有的画布工具,我们可以在canvas上绘制任意元素,包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性,利用js在canvas上绘制这些美丽的...
HTML5实现DNA螺旋动画效果演示.zip
HTML5实现3D效果实景地图,是一款3D实景地图,截取了实景的房屋大厦,并且可以旋转展示,具有非常强的立体效果!
html5实现腾讯QQ登录界面背景动画特效(QQ背景动态)+js,可以有效的学习html标签,制作出所见即所得的东西。高大上的背景!
使用html5与css3实现的动画小车页面,效果不错
html5结合Canvas实现的树叶飘落动画特效源码.zip
特效简介: jQuery Html5实现唯美表白动画代码,动画效果很棒,程序员表白必备! 注:线上预览不了,请下载至本地预览
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
HTML5 3D动画实现起来非常方便,之前介绍过基于jQuery的3D旋转插件是利用多张多视角图片播放来实现的,而今天分享的这款HTML5 3D旋转动画是利用纯HTML5技术实现的,该动画实现了HTML5 Logo旋转的效果。 在线演示 ...
HTML5实现圣诞雪人动画代码基于HTML5、CSS3、prefixfree.min.js制作,雪人跳跃动画效果,红色网页背景,雪人戴着黑色帽子,蓝色围巾。
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果