drawImage()

将图片绘制在画布上

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

参数

image object 绘制图片.允许任何的 canvas 图像源(CanvasImageSource),例如:CSSImageValue,HTMLImageElement,SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap 或者OffscreenCanvas.

dx Number image的左上角在目标canvas上 X 轴坐标

dy Number image的左上角在目标canvas上 Y 轴坐标

sx Number 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 X 轴坐标.

sy Number 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 Y 轴坐标.

dWidth Number image在目标canvas上绘制的宽度. 允许对绘制的image进行缩放. 如果不说明, 在绘制时image宽度不会缩放.

dHeight Number image在目标canvas上绘制的高度. 允许对绘制的image进行缩放. 如果不说明, 在绘制时image高度不会缩放

sWidth Number 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的宽度.如果不说明,整个矩形(裁剪)从坐标的sx和sy开始,到image的右下角结束

sHeight Number 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度.

测验

drawImage(image, 30, 10)

参数dx,dy是画布上的坐标,指示从此坐标点开始绘画图片.图片就是原本大小 200x136

ctx.drawImage(image, 30, 10, 80, 120)

参数dWidth,dHeight,以指定的高宽开始绘画图片.可见,图片变形了并且比例失调.下图左

如果参数是原图片宽度的整数倍,且维持原长宽比例.那么图片就有放大或者缩小效果.下图右

ctx.drawImage(image, 0, 0, 120, 80, 30, 10, 120, 80)

参数sx,sy,sWidth,sHeight,可以看成是一个矩形,sx,sy是矩形左上角顶点,sWidth,sHeight是矩形高与宽

这个矩形是个选择框,它选择的是图片上的区域.选定后,画在画布上.后面的四个参数与图2一样,指示从哪里开始画,画多大

简单的讲,它的作用就是从原始图片上选择一部分画到画布上.

图片源也可以是一个视频.下面这个视频在每次点击播放按钮时,就会绘制播放时那帧到画布上

177页

图像的绘制效果受制于阴影,剪辑区域,图像合成等属性

drawImage()方法在绘制图像时不考虑当前路径,然而,它却会将globalAlpha设置,阴影效果,剪辑区域,以及全局图像合成操作符等属性

运用到图像的绘制之中