canvas图像操作

CanvasRenderingContext2D.drawImage()是 Canvas 2D API 中的方法,它提供了多种方式来在Canvas上绘制图像。

语法
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数
image
绘制到上下文的元素。允许任何的 canvas 图像源,例如:HTMLImageElement
HTMLVideoElement
,或者 HTMLCanvasElement

dx
目标画布的左上角在目标canvas上 X 轴的位置。
dy
目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth
在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。
dHeight
在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
sx
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。
sy
需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。
sWidth
需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。
sHeight
需要绘制到目标上下文中的,源图像的矩形选择框的高度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 线条样式 绘制直线,第五章知识简单回顾 lineWidth 设置或返回当前的线条宽度,单位为像素 lineCap ...
    Zd_silent阅读 3,398评论 0 0
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 13,621评论 1 4
  • 最基本的使用创建一个画布所有的操作都在画布的context上面canvas是基于状态而不是基于对象的,比如说颜色都...
    亲爱的孟良阅读 5,577评论 0 4
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,188评论 2 32
  • 版权声明:本文为博主原创文章,未经博主允许不得转载 前言 Canvas 本意是画布的意思,然而将它理解为绘制工具一...
    cc荣宣阅读 41,693评论 1 47