canvas之drawImage

原创 2017年08月11日 11:44:34

 今天在掘金上看到了别人用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 中的任一个对象。
绘制参数的含义可以参看下图:

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

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

 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,布局的话就可以改一下上面红色那两个坐标即可;


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuzijiang1123/article/details/77075439

canvas的drawImage方法参数详解

canvas
  • kidoo1012
  • kidoo1012
  • 2017-07-15 17:24:01
  • 5082

canvas使用drawImage()方法绘制img和video的区别

drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。具体参数 参数 描...
  • qq_30100043
  • qq_30100043
  • 2017-08-29 11:06:49
  • 1805

Canvas中的drawImage

Canvas drawImage
  • zhaoruda
  • zhaoruda
  • 2017-04-18 22:17:38
  • 2011

H5之DrawImage使用

H5 canvas画布使用绘图context.drawImage();
  • qq_36220729
  • qq_36220729
  • 2017-03-24 11:18:19
  • 1312

html5 canvas drawImage图片模糊

问题:当使用如下设置时,图片显示模糊 javascriptvar img=new Image(); img.src="http://www.w3school.com.cn/i/eg_tulip.jp...
  • gdp12315
  • gdp12315
  • 2017-02-17 16:06:58
  • 1142

canvas和image互相转换

转载:http://www.cnblogs.com/sapho/p/6143819.html1. 把img转换为canvas对象复制代码 function convertImageToCanvas(i...
  • u013223198
  • u013223198
  • 2017-05-09 11:47:29
  • 838

HTML5 canvas drawImage() 方法

定义和用法 drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。 JavaScript ...
  • macleer
  • macleer
  • 2017-06-08 14:58:28
  • 276

Canvas与Image互相转换

JS Canvas与Image互相转换 原文地址: JavaScript Canvas Image Conversion 原文演示: JavaScript Canvas Image Conve...
  • renfufei
  • renfufei
  • 2013-08-09 14:48:54
  • 31511

canvas控制图片缩放

例子:     您的浏览器不支持canvas     var canvas = document.getElementById("can...
  • kongjunchao159
  • kongjunchao159
  • 2015-08-25 15:22:41
  • 3250

Canvas使用drawImage()函数在画布上显示图像

Canvas使用drawImage()函数在画布上显示图像
  • Wangdanting123
  • Wangdanting123
  • 2016-08-12 23:28:40
  • 1838
收藏助手
不良信息举报
您举报文章:canvas之drawImage
举报原因:
原因补充:

(最多只允许输入30个字)