这一次绘制一个带影子可以控制走路方向的小姐姐。首先来瞅一眼上一个绘制好的小姐姐的样子。
今儿个再来给小姐姐一个升级版
我是会左右前后转的，还有影子陪着我
下面开始啦。
奉上素材：
1、首先在html中代码加上四个按钮，控制左右前后。canvas标签不变哟
2、小姐姐向前走的时候，动的是x轴的坐标，高度是不变的。那么向左走的时候，要裁减和绘制的是第二排的小姐姐。那么x轴坐标移动跟向前走是一样的。要变的是Y轴。以此类推，向右和向后都是一样的变换Y轴的坐标。
2.1每一排小姐姐的Y轴都是不一样，所以定义一个变量记住是往哪边走。通过点击前后左右的按钮来赋值。
document.getElementById("btn-left").onclick=function(){
beginy=1;
}
document.getElementById("btn-right").onclick=function(){
beginy=2;
}
document.getElementById("btn-up").onclick=function(){
beginy=3;
}
document.getElementById("btn-down").onclick=function(){
beginy=0;
}
2.2 小姐姐多了一个影子。用canvas绘制阴影来做这个效果
shadowColor ： 设置或返回用于阴影的颜色
shadowBlur ： 设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
shadowOffsetX： 设置或返回阴影距形状的水平距离
shadowOffsetY： 设置或返回阴影距形状的垂直距离
那下面我就要走起来了。大家伙儿的跟上了。
全部js的代码：
var mycanvas=document.getElementById("mycanvas");
var context=mycanvas.getContext("2d");
//创建img
var img=new Image();
img.src="NPC1.png";
//加载
img.onload=function(){
var beginx=0;//要裁减的图片X轴坐标
var beginy=0;//要裁减的图片Y轴坐标
setInterval(function(){
context.clearRect(0, 0, mycanvas.width, mycanvas.height);
//给小姐姐加个影子
context.shadowColor="#ccc";
context.shadowBlur=10;
context.shadowOffsetX=-20;
context.shadowOffsetY=-10;
context.drawImage(img, beginx*40, beginy*65, 40, 65, 150, 150, 40, 65);
beginx++;
beginx%=4;
}, 100);
document.getElementById("btn-left").onclick=function(){
beginy=1;
}
document.getElementById("btn-right").onclick=function(){
beginy=2;
}
document.getElementById("btn-up").onclick=function(){
beginy=3;
}
document.getElementById("btn-down").onclick=function(){
beginy=0;
}
}
我爱学习，学习使我快乐。
你也跟一样爱学习的话，来唠嗑儿吧。奉上车牌号（群：295383988）
网友评论