首页 > 代码库 > 驯鹿拉圣诞老人动画效果图如下(四周运动)
驯鹿拉圣诞老人动画效果图如下(四周运动)
html如下:
<div style="width:400px;height:300px;background:url(yuandan.jpg) no-repeatcenter;background-size:300px 200px;">
<canvas id="canvas" style="border:1px solid #000;display:block;margin:40px auto 0"></canvas>
</div>
javascript如下:
//定义id为canvas的元素为变量myCanvas
var myCanvas=document.getElementById("canvas");
//设myCanvas的宽是400px,高300px;
myCanvas.width="400";
myCanvas.height="300";
//定义一个在画布上绘图的环境
var ctx=myCanvas.getContext("2d");
//此为截取图片的x坐标
var shengdanP=[{x:0},{x:220},{x:440},{x:660}];
//创建一个Image对象
var shengdanImg=new Image();
//设置shengdanImg的路径
shengdanImg.src=http://www.mamicode.com/"lr.jpg";
//定义加载完图在运行程序
shengdanImg.onload=function(){
setInterval(pao,40);
}
//设置shengdanP的初始下标为0
var index=0;
//设置动画运动的初始长度为0
var lc=0;
//设置画布的坐标
ctx.translate(290,260);
//以下是运行动画的代码
function pao(){
//每次运行lc就加10
lc+=10;
//如果lc小于260,擦除shengdanImg,画布的坐标变为(-10,0)
if(lc<260){
ctx.clearRect(0,0,100,40);
ctx.translate(-10,0);
}
//如果lc等于260,擦除shengdanImg,旋转90度,画布的坐标变为(-70,0),再擦除shengdanImg
else if(lc==260){
ctx.clearRect(0,0,100,40);
ctx.rotate(Math.PI/2);
ctx.translate(-70,0);
ctx.clearRect(-70,0,10,40);
}
//如果lc小于420,擦除hengdanImg,画布的坐标变为(-10,0)
else if(lc<420){
ctx.clearRect(0,0,100,40);
ctx.translate(-10,0);
}
//如果lc等于420,擦除shengdanImg,旋转90度,画布的坐标变为(-70,0),再擦除shengdanImg
else if(lc==420){
ctx.clearRect(0,0,100,40);
ctx.rotate(Math.PI/2);
ctx.translate(-70,0);
ctx.clearRect(-70,0,100,40);
}
//如果lc小于680,擦除hengdanImg,画布的坐标变为(-10,0)
else if(lc<680){
ctx.clearRect(0,0,100,40);
ctx.translate(-10,0);
}
//如果lc等于680,擦除shengdanImg,旋转90度,画布的坐标变为(-70,0),再擦除shengdanImg
else if(lc==680){
ctx.clearRect(0,0,100,40);
ctx.rotate(Math.PI/2);
ctx.translate(-70,0);
ctx.clearRect(-70,0,100,40);
}
//如果lc小于840,擦除hengdanImg,画布的坐标变为(-10,0)
else if(lc<840){
ctx.clearRect(0,0,100,40);
ctx.translate(-10,0);
}
//如果lc等于840,擦除shengdanImg,旋转90度,画布的坐标变为(-70,0),再擦除shengdanImg,lc变为0
else if(lc==840){
ctx.clearRect(0,0,100,40);
ctx.rotate(Math.PI/2);
ctx.translate(-70,0);
ctx.clearRect(-70,0,100,40);
lc=0;
}
//如果index等于shengdanP的长度,index变为0
if(index==shengdanP.length){
index=0;
}
//声明sx为下标为index的shengdanP下x的值
var sx=shengdanP[index].x;
//在画布上绘出shengdanImg,
ctx.drawImage(shengdanImg,sx,0,220,80,0,0,100,40);
//最后每运行一次这个函数infex就加1
index++;
}
标签: html5 canvas js
驯鹿拉圣诞老人动画效果图如下(四周运动)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。