其他分享
首页 > 其他分享> > canvas drawImage() 方法

canvas drawImage() 方法

作者：互联网

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
context.drawImage(img, dx, dy);
context.drawImage(img, dx, dy, dWidth, dHeight);
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

后面最复杂的语法虽然看上去有9大参数，但不用慌，实际上可以看出就3个参数：
    img
　　就是图片对象，可以是页面上获取的DOM对象，也可以是虚拟DOM中的图片对象。
　　dx, dy, dWidth, dHeight
　　表示在canvas画布上规划处一片区域用来放置图片，dx, dy为canvas元素的左上角坐标，dWidth, dHeight指canvas元素上用在显示图片的区域大小。如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。
　　sx,sy,swidth,sheight
　　这4个坐标是针对图片元素的，表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角，然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。
　　drawImage()方法有一个非常怪异的地方，大家一定要注意，那就是5参数和9参数里面参数位置是不一样的，这个和一般的API有所不同。一般API可选参数是放在后面。但是，这里的drawImage()9个参数时候，可选参数sx,sy,swidth,sheight是在前面的。如果不注意这一点，有些表现会让你无法理解。

参数值：

参数描述
img规定要使用的图像、画布或视频。
sx可选。开始剪切的 x 坐标位置。
sy可选。开始剪切的 y 坐标位置。
swidth可选。被剪切图像的宽度。
sheight可选。被剪切图像的高度。
x在画布上放置图像的 x 坐标位置。
y在画布上放置图像的 y 坐标位置。
width可选。要使用的图像的宽度。（伸展或缩小图像）
height可选。要使用的图像的高度。（伸展或缩小图像）

 要使当前图片平铺到一个750*750的canvas盒子里面

示例代码：

img.onload = () => {
      
      this.getimginfo(this.pickimgaes[id]).then((success) => {
        //要铺在当前canvas里面的图片的真实高度
        ctxhei = success.height
        //要铺在当前canvas里面的图片的真实宽度
        ctxwidth = success.width
        if (ctxwidth < 750 || ctxhei > 750) {
          // 以短边为准
          if (750 - ctxwidth > 750 - ctxhei) {

            ctxhei = 750 * ctxhei / ctxwidth
            ctxwidth = 750
          } else {

            ctxwidth = 750 * ctxwidth / ctxhei
            ctxhei = 750
          }
        }
        console.log(ctx)
        if (ctxwidth > 750) {
          ctxdx = 0 - (ctxwidth - 750) / 2
        }
        if (ctxhei > 750) {
          ctxdy = 0 - (ctxhei - 750) / 2
        }
        ctx.drawImage(img, ctxdx, ctxdy, ctxwidth, ctxhei)
      }, err => {
        console.log(err);
      })

    }

等待补充____;

标签：canvas,750,drawImage,img,ctxhei,ctxwidth,方法
来源： https://blog.csdn.net/qq_36893984/article/details/121837391