canvas绘制图片

Posted 2021-02-08 ye-hcj

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