canvas绘制图片

标签：func   info   绘制图片   video   block   enable   坐标   document   ges   

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);
   };

canvas绘制图片

标签：func   info   绘制图片   video   block   enable   坐标   document   ges   

原文地址：https://www.cnblogs.com/ye-hcj/p/10357589.html