将图片画到canvas 上的几种方法

我的网站：http://www.mzzy8.com/

任何的知识体系，都是由小的知识体系构成，你要想成为高手

无法第一步就是把所有的琐碎的知识都搞定它！

写的多了，自然就会了，这也是为啥要写笔记，写笔记的过程本身就是复习的过程，你想写

它个几千篇笔记， 你要说你不会， 人家肯定也不相信！

canvas 画图片的

第一种，就是在画布的坐标上，直接将图片画到上面去，此时

假如图片大小超出了画布，图片也不缩放

  /*3参数*/
        /*图片对象*/
        /*绘制在画布上的坐标 x y*/
        //ctx.drawImage(image,100,100);

<script type="text/javascript">
			
		window.onload = function(){
			var mycanvas = document.getElementById('mycanvas')
			var ctx = mycanvas.getContext('2d')

			// 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
			// 反应，比如网易的图片
			var img = new Image();
			img.onload = function(){
				alert('加载完毕')
				
				// 将图片画到canvas上面上去！
				ctx.drawImage(img,100,100);


			}

			img.src = "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537549551&di=3f8d4d76679adcae225387f7d6b199aa&src=http://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/lvpics/h=800/sign=b49dc48f8718367ab28972dd1e728b68/9922720e0cf3d7ca7f0736d0f31fbe096a63a9a6.jpg";




		}	

	</script>
	
	<canvas id='mycanvas' width="500" height="500"></canvas>

显示效果：

虽然我截图比较Low ,凑合看吧

第二种画法！

// 将图片画到canvas上面上去！
				// 从100,100 开始画，然后缩放到200,200
				ctx.drawImage(img,100,100,200,200);

显示效果如下：

明显就能看出效果，这就是缩放的效果：

 

最后一种画法？

// 将图片画到canvas上面上去！
 // 从100,100 开始画，然后缩放到200,200
 ctx.drawImage(img,593,327,500,500,100,100,300,300);

从图片的593,327 坐标开始截图，截取 500，500 这么大

然后将截取的图片，从canvas 100，100开始画， 缩放 300，300 这么大！

 

显示效果如下：

原始图效果：

 

总共在canvas 画图片就这三种方法！

 /*绘制图片的三种方式*/

        /*3参数*/
        /*图片对象*/
        /*绘制在画布上的坐标 x y*/
        //ctx.drawImage(image,100,100);

        /*5个参数*/
        /*图片对象*/
        /*绘制在画布上的坐标 x y*/
        /*是图片的大小  不是裁剪  是缩放*/
        //ctx.drawImage(image,100,100,100,100);

        /*9个参数*/
        /*图片对象*/
        /*图片上定位的坐标  x y */
        /*在图片上截取多大的区域  w h*/
        /*绘制在画布上的坐标 x y*/
        /*是图片的大小  不是裁剪  是缩放*/
        ctx.drawImage(image,400,400,400,400,200,200,100,100);

 

行吧，这篇就结束了