zoukankan      html  css  js  c++  java
  • canvas.drawImage()方法详解

    首先看html5.js

    /**
    @param {Element} img_elem
    @param {Number} dx_or_sx
    @param {Number} dy_or_sy
    @param {Number} [dw_or_sw]
    @param {Number} [dh_or_sh]
    @param {Number} [dx]
    @param {Number} [dy]
    @param {Number} [dw]
    @param {Number} [dh]
    */
    CanvasRenderingContext2D.prototype.drawImage = function(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh) {};
    再底层
    drawImage(image: HTMLElement, offsetX: number, offsetY: number, width?: number, height?: number, canvasOffsetX?: number, canvasOffsetY?: number, canvasImageWidth?: number, canvasImageHeight?: number): void;

    其实平时调用支持三种传参
    void ctx.drawImage(image, dx, dy);//dx,dy决定了生成的图像与画布的间隔距离
    void ctx.drawImage(image, dx, dy, dWidth, dHeight);//dWidth, dHeight决定了生成图片的宽高,默认是img.width,img.height
    void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);// dWidth, dHeight是对生成图片的缩放值


      image
    绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource),例如:CSSImageValueHTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElementImageBitmap 或者OffscreenCanvas
      dx
    目标画布的左上角在目标canvas上 X 轴的位置。生成图像与画布坐标第一象限的间隔(y轴)
      dy
    目标画布的左上角在目标canvas上 Y 轴的位置。生成图片与画布坐标第四象限的间隔(x轴)
      dWidth可选
    在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。
      dHeight可选
    在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
      sx可选
    需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。
      sy可选
    需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。
      sWidth可选
    需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。
      sHeight可选
    需要绘制到目标上下文中的,源图像的矩形选择框的高度。

    抛出异常

    INDEX_SIZE_ERR
    如果 canvas 或者图像矩形区域的宽度或高度为0 。
    INVALID_STATE_ERR
    图像没有数据。
    TYPE_MISMATCH_ERR
    提供的原始元素不支持。
    NS_ERROR_NOT_AVAILABLE
    图像尚未加载。使用.complete === true.onload确定何时准备就绪。
     
  • 相关阅读:
    PointToPointNetDevice doesn't support TapBridgeHelper
    NS3系列—10———NS3 NodeContainer
    NS3系列—9———NS3 IP首部校验和
    NS3系列—8———NS3编译运行
    【习题 7-6 UVA
    【Good Bye 2017 C】 New Year and Curling
    【Good Bye 2017 B】 New Year and Buggy Bot
    【Good Bye 2017 A】New Year and Counting Cards
    【Educational Codeforces Round 35 D】Inversion Counting
    【Educational Codeforces Round 35 C】Two Cakes
  • 原文地址:https://www.cnblogs.com/zeussbook/p/10281967.html
Copyright © 2011-2022 走看看