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确定何时准备就绪。
     
  • 相关阅读:
    FastMM、FastCode、FastMove的使用(图文并茂)
    12种JavaScript MVC框架之比较
    十款最佳Node.js MVC框架
    Couchbase 服务器
    C#程序员阅读的书籍
    ORM的实现
    Linux内核策略介绍
    ASP.NET MVC + EF 利用存储过程读取大数据
    面向.Net程序员的dump分析
    动态加载与插件化
  • 原文地址:https://www.cnblogs.com/zeussbook/p/10281967.html
Copyright © 2011-2022 走看看