HTML5 Canvas 图像动画的实现
2013-01-12 12:02:04|
发布: 黄奕能|
浏览: 4195
<canvasmycanvas");
var p100=c.getContext("2d");
------
p100.clearRect(x,y,x,y) // 擦除画布一个区域x-y、x-y
按照指定的周期来调用函数,返回值为定时器的ID值
setInterval(code,millisec)
取消由setInterval()方法设置的定时器。
clearInterval(idofsetInterval)
事件部分：
onclick=“interval=setInterval(draw,5);”
onclick=“clearInterval(interval);”
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5视频教程-canvas</title>
</head>
<body>
<canvas ></canvas>
<br>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var p100=canvas.getContext("2d");
var dir=0;
var width=500;
var height=200;
//像素移动的位置，正数向下，负数向上
var exp=1;
function fff(){
// 擦除画布一个区域xy、xy
p100.clearRect(0,0,width,height);
//定义颜色
p100.fillStyle="red";
//从新开始画，防止冲突重叠
p100.beginPath();
p100.arc(180,dir,dir,0,Math.PI*2,1);
//结束画布，防止冲突重叠
p100.closePath();
//结束渲染
p100.fill();
dir=dir+exp;
if(dir==0 || dir==height){
exp=exp*-1; //掉头位置
}
}
</script>
<button>开始</button>
<button>停止</button>
</body>
</html>
动画效果：
转载请注明出处【】
如非特别注明，本站内容均为领悟书生原创，转载请务必注明作者和原始出处。
本文地址：
什么是响应式网页设计？
HTML5项目笔记9：HTML5 Canvas 的图表报表开发
HTML5项目笔记8：使用HTML5 的跨域通信机制进行数据同步
HTML5项目笔记7：使用HTML5 WebStorage API构建与.NET对应的会话机制
HTML5项目笔记6：使用HTML5 FileSystem API设计离线文件存储
HTML5项目笔记5：使用HTML5 WebDataBase设计离线数据库
HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
HTML5项目笔记3：使用Canvas设计离线系统的Logo
HTML5项目笔记2：离线系统表单设计
相关文章
精彩导读
热门资讯
关注我们
