今天在掘金上看到了别人用js手动写的flappy bird H5游戏,觉得很有意思,自己也想好好玩一下,可以学习一下canvas,又能锻炼一下自己的思维;

 

 今天先学习一下drawImage这个API;

 

 贴一下网上别人的介绍,个人觉得很实用,也很好入门;

—————————————————————————————————————

要在绘图上下文中绘制图片,可以使用 drawImage 方法。该方法有三种不同
的参数:
 drawImage(image,dx,dy)
 drawImage(image,dx,dy,dw,dh)
 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
其中的 image 参数可以是 HTMLImageElement、HTMLCanvasElement 和
HTMLVideoElement 中的任一个对象。
绘制参数的含义可以参看下图:

canvas之drawImage

——————————————————————————————————————

通过自己的实验,我这边还是解释一下,前面两个用法通俗易懂;

 drawImage(image,dx,dy) 我把一张图片image放到canvas中,坐标是dx,dy,以canvas左上角为坐标原点,图片的大小以自己为主,如果大于canvas则显示一部分;

 drawImage(image,dx,dy,dw,dh) 这个比上一个多的一个控制图片的大小,就是因为有时候可能canvas的大小不满于图片的大小,或者你要对图片进行缩放,多了2个坐标参数dw和dh,这两个参数我们用来控制图片在canvas中显示的大小;

 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 这个感觉这个是比较难理解的,大家仔细观察一下,这里面的参数其实是比上面参数多了4位sx和sy,sw和sh,主要是用来对于图片进行裁剪;我这边使用的地方在于对css sprite图的裁剪,因为把所有的图片都做成了雪碧图,去显示的时候就需要用到这个参数去获取我想要的那张图片;

 

这里我好好来解释一下sx,sy,sw,sh;

sx和sy代表你要从哪开始裁剪;

sw和sh代表你要裁剪的那部分的大小;(这的裁剪的部分就代表我需要的部分)

 

 

既然说到了雪碧图,我们就需要说一下background-position这个属性,这个css3属性就是为了让我们去在雪碧图中寻找我们需要的那张图片;

background-position:后面有两个属性,第一个是水平位置,第二个是垂直方向的位置,这里需注意的是两个属性的顺序
比如说
background-position: left -29px;(当中的left指从图片的最左端读起,-29px就是将图片向上移动29px,然后开始读)
再如:background-position: 15px 20px;(指将图片向右移15px,向下移20px;)
简单地说,就是以图片的左上角顶点为原点,图片往下和右移动都为正,反之为负;

 

当我们用工具去生成雪碧图的时候,软件都会告诉你background-position改如何去书写:

比如我去把三张图片去生成雪碧图

banner{height:14px;width:343px;background-position:0 0;}

bg{height:480px;width:343px;background-position: 0 -14px;}

down_pipe{height:60px;width:62px;background-position: 0 -494px;}

 

都会告诉你每个图片在雪碧图中的大小和位置,我们可以按照这个东西去使用我们的drawImage去我们的雪碧图中找出我们的图片并画在canvas上;

借用上面的background-position值,分别求出对应的drawImage中的裁剪部位值;

ctx.drawImage(img.banner,0,0,343,14,0,0,343,14);

ctx.drawImage(img.bg,0,14,343,480,0,0,343,480);

ctx.drawImage(img.down_pipe,0,494,62,60,0,0,62,60);

 

OK,布局的话就可以改一下上面红色那两个坐标即可;

分类:

技术点:

相关文章: