美文网首页
canvas图像操作

canvas图像操作

作者: JasonQiao | 来源:发表于2016-09-08 10:13 被阅读72次

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
需要绘制到目标上下文中的,源图像的矩形选择框的高度。

相关文章

  • Canvas学习笔记之图像处理

    Canvas 学习笔记 -- by Damon canvas对于图像的操作能力 功能:动态的图像合成、图形的背景、...

  • canvas图像操作

    CanvasRenderingContext2D.drawImage()是 Canvas 2D API 中的方法,...

  • canvas之图像

    一、canvas图像 canvas更有意思的一项特性就是图像操作能力。用于动态的图像合成或者作为图形的背景,以及游...

  • Canvas API

    Canvas 功能 在网页中实时生成图像,并操作图像内容(通俗就是在网页中画画) canvas画布可以制作在线绘图...

  • canvas(五) 使用图像

    使用图像 canvas 具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景,以及游戏界面(Sprites...

  • canvas-09 图像源相关

    常用图像源: 图像元素:img 视频元素video canvas:canvas...

  • canvas使用图片

    使用图像 引入图像到canvas里需要以下两步基本操作: 获得一个指向[HTMLImageElement]的对象或...

  • canvas图片操作/canvas像素级操作/canvas视频(

    canvas图片操作 canvas像素级操作 canvas视频(video)操作

  • Canvas

    ## 功能 在网页中实时生成图像,并操作图像内容(通俗就是在网页中画画) 1.canvas画布可以制作在线绘图工具...

  • Canvas

    Canvas绘图- JavaScript 来绘制图像 使用 JavaScript 来绘制图像canvas 元素本身...

网友评论

      本文标题:canvas图像操作

      本文链接:https://www.haomeiwen.com/subject/xyssettx.html