网站首页 > 技术文章正文

canvas绘制会动的小姐姐升级版(绘完这个可以涨工资了)

nanyue 2024-10-31 13:50:40 技术文章 7 ℃

这一次绘制一个带影子可以控制走路方向的小姐姐。首先来瞅一眼上一个绘制好的小姐姐的样子。

今儿个再来给小姐姐一个升级版

我是会左右前后转的，还有影子陪着我

下面开始啦。

奉上素材：

1、首先在html中代码加上四个按钮，控制左右前后。canvas标签不变哟

<body>

</body>

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;

}

</script>

我爱学习，学习使我快乐。

你也跟一样爱学习的话，来唠嗑儿吧。

上一篇：前端必备知识点—Canvas(画布)（前端画画）
下一篇： TaskBuilder用echarts第三方水球插件实现动态水球波纹图表的方法

网站首页 > 技术文章 正文

canvas绘制会动的小姐姐升级版(绘完这个可以涨工资了)

猜你喜欢

网站首页 > 技术文章正文