canvas 加载图像

canvas 加载图像

加载图片需要3步:
1.建立image对象.
2.设置image的src
3.image的onload事件，并切在回调中绘制我们的图像。
例如:

var canvas=document.getElementById('canvas');
			var context=canvas.getContext('2d');
			var image=new Image();
			
			image.src='https://raw.githubusercontent.com/AbdullA-Ababakre/BlogImage/master/Normalization%20process.png';			
			
			image.onload=function(){
				context.drawImage(image,50,50,50,50);
			};

图像裁剪

前面我们讲到如何在 Canvas 中加载各种帅气酷炫的图像。但是有时候我们并不需要使用完整的图像，而只是图像的一部分内容，这个时候我们就需要使用图像裁剪。图像裁剪是图片 PS 中经常使用到的一种技术，目的是为了突出我们图片的某个特定的区域。接下来，让我们学习如何使用 Canvas 来裁剪我们的图像。

还是 context.drawImage()
没错，你没看错，我们还是使用 drawImage 的方法。裁剪是 drawImage 方法的最后一种用法。