前端img里面的src能是bmp么_前端图形学基础（三）——Canvas绘制图片

点击右上角的关注，不定期前端干货分享！！

前端图形学系列文章：

前端图形学基础(一)——Canvas基础入门

前端图形学基础(二)——Canvas基础

今天我们来说下Canvas一个新的api,context.drawImage();这个Api有三种调用方式。下面我分别来介绍

在画布上定位图像：(3个参数)

context.drawImage( img , x , y );

三个参数也很容易理解

1、img：待绘制的图片对象，这里可以是img标签，也可以是Image对象，两者实质都一样，都表示图片对象。

2、x， y 分别对应是的图片左上角在画布的坐标

举例：

var img = new Image();img.onload = function(){ context.drawImage(this,10,10);}img.src ='./img/toutiao.jpg';

效果如下：

这里需要我们注意的是我们在绘制图片的时候，一定要保证图片加载完成，所以我们一般在图片的onload事件里面去绘制图片。

在画布上定位图像，并规定图像的宽度和高度：(5个参数)

context.drawImage( img , x , y ,width ,height);

还是绘制上面的图片，我们在后面添加width,height看效果：

context.drawImage(this,10,10,100,100);

我们强制把图片绘制成宽为100，高为100的图像了，从图上我们可以看到，图片变形了，除非我们把宽高比和图片本身的宽高比一致，图片方可正常显示。

剪切图像，并在画布上定位被剪切的部分：(9个参数)

context.drawImage( img , sx , sy , swidth , sheight , x , y , width , height);

前面两种方式的绘制是将整张图片全部绘制到画布上，那么第三种方式的调用则是可以在图片上截取一部分然后贴到画布上。简单可以理解成我们在图片上扣了一块下来，然后贴到画布上，想像一下这个过程，这9个参数就不难理解了。

img：图片对象

sx：我们要在图片上扣的起始位置的X坐标

sy：我们要在图片上扣的起始位置的Y坐标

swidth，sheight：我们要扣的图片的宽高

x，y：扣完以后，我们要开始放在画布上的x,y的位置。

width,height：我们要创建多大的画布区域存放我们扣过来的图片

这个方法的应用最多就是在canvas游戏中的使用。我们有一个序列帧图片，我们可以通过取出图片不同的部分从而形成动画，举例：

我们可以看这张图，就是一个典型的序列帧图片，接下来我们让其动起来。

先看效果：

var img = new Image();img.onload = function(){var singleW = this.width / 11; //因为图片有11帧var singleH = this.height;var i = 1;setInterval(()=>{i%=11;context.clearRect(0,0,singleW*2,singleH*2);context.drawImage(this , singleW * i , 0 , singleW , singleH,10,10,singleW,singleH);i+=1;},60)}img.src ='./img/person.png';

原理就是我们把图片的每一帧都单独扣出来，然后放在画布上，通过定时器就可以实现动画了，很多游戏框架中的精灵动画就是这样来的。

总结

canvas绘制图片需要注意要在图片加载完成后再去绘制，否则绘制出来的结果依然是空白。

context.drawImage方法的三种调用方式，其中第三种调用最为重要，在实际的项目开发过程中应用也是最多，最灵活。

好了，今天就先介绍到这里，这里是【畅哥聊技术】前端图形学基础，更精彩的内容敬请关注，未完待续。。。