关于canvas:图片画到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>

效果图：

第二种：

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

效果图：

第三种：

// 从 100,100 开始画，而后缩放到 200,200
 ctx.drawImage(img,593,327,500,500,100,100,300,300);

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

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

效果图：

原图：