首页 > 其他 > 详细

利用canvas来绘制一个会动的图画,欢迎指教

时间:2017-02-21 22:19:41      阅读:250      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制小人动画</title>
<style>
canvas{
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 绘制小人动画 -->
<canvas width="400" height="600" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
function toAngle(radian){
return radian*180/Math.PI;
}
function toRadian(angle){
return angle*Math.PI/180;
}
function img(ctx,element,x0,y0){
var x = x0,
y = y0;
element.onload = function(){
var width = element.width/4,
height = element.height/4;
var i = 0,
j = 0,
a = 0;
setInterval(function(){
//x = x + a;
ctx.clearRect(x,y,width,height);
ctx.drawImage(element,width*i,height*j,width,height,x,y,width,height);
i ++;
if(i == 4){
setTimeout(function(){
i = 0;
if(j == 0){
j =1;
//a-=10;
}else if(j == 1){
j = 3;
}else if(j == 2){
j = 0;
}else if(j == 3){
j = 2;
//a+=10;
}
},20)
}
},200)
}
};
var img1 = new Image();
img1.src = ‘imgs/game1.png‘;
img(ctx,img1,0,0);

//这边是自己封装了一个函数,其实从性能优化的角度来考虑,我们可以先在内存中创建一个canvas标签,将这个图画放在内存中的canvas里面,再将内存中创建好的canvas放到页面上的这个canvas标签上,这只是一个思路,希望大家可以往这方面考虑
</script>
</html>

利用canvas来绘制一个会动的图画,欢迎指教

原文:http://www.cnblogs.com/199316xu/p/6426336.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!