canvas繪製圖片

canvas繪製圖片

1. 方法

   canvas支持image,svg,video,canvas的繪製
   
   drawImage(image, x, y)                                               在座標x,y處繪製圖片
   drawImage(image, x, y, width, height)                                指定繪製圖片的大小
   drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)   在圖片sx,sy處截取sWidth,sHeight部分，以dWidth,dHeight大小繪製到canvas中dx,dy位置

2. 以原始尺寸繪製圖片

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   var img = new Image();
   img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549708412613&di=3cc8f0482453754248fc38c062a15f00&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F17%2F04%2F16pic_1704757_b.jpg';
   img.onload = function() {
       ctx.drawImage(img, 0, 0)
   };

3. 以指定尺寸繪製圖片

   var img = new Image();
   img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549708412613&di=3cc8f0482453754248fc38c062a15f00&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F17%2F04%2F16pic_1704757_b.jpg';
   img.onload = function() {
       ctx.imageSmoothingEnabled = false;
       ctx.drawImage(img, 0, 0, 200, 300)
   };

4. 截取圖片部分

   var img = new Image();
   img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549708412613&di=3cc8f0482453754248fc38c062a15f00&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F17%2F04%2F16pic_1704757_b.jpg';
   img.onload = function() {
       ctx.imageSmoothingEnabled = false;
       ctx.drawImage(img, 150, 100, 400, 200, 0 ,0, 400, 200);
   };