CanvasContext.drawImage

使用顺序:drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight)

解释:绘制图像到画布。

方法参数

参数名属性必填默认值说明
imageResourceString所要绘制的图片资源 。
dxNumber图像的左上角在目标 canvas 上 X 轴的位置。
dyNumber图像的左上角在目标 canvas 上 Y 轴的位置 。
dWidthNumber在目标画布上绘制图像的宽度,允许对绘制的图像进行缩放 。
dHeightNumber在目标画布上绘制图像的高度,允许对绘制的图像进行缩放 。
sxNumber源图像的矩形选择框的左上角 X 坐标。
syNumber源图像的矩形选择框的左上角 Y 坐标。
sWidthNumber源图像的矩形选择框的宽度 。
sHeightNumber源图像的矩形选择框的高度 。

示例

扫码体验

CanvasContext.drawImage - 图1请使用百度APP扫码

图片示例

CanvasContext.drawImage - 图2

CanvasContext.drawImage - 图3

CanvasContext.drawImage - 图4

代码示例1

在开发者工具中预览效果

  1. <canvas canvas-id="myCanvas" class="myCanvas"/>
  2. <button type="primary" bindtap="drawImage">点击上传</button>
  1. Page({
  2. drawImage () {
  3. const canvasContext = swan.createCanvasContext('myCanvas');
  4. swan.chooseImage({
  5. success: function(res){
  6. canvasContext.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
  7. canvasContext.draw();
  8. }
  9. });
  10. }
  11. });

代码示例2 - 把用户正方形图片绘制成圆形

在开发者工具中预览效果

  1. Page({
  2. data: { },
  3. onLoad: function () {
  4. var contex = swan.createCanvasContext('myCanvas')
  5. contex.beginPath();
  6. contex.arc(110, 60, 30, 0, 2 * Math.PI);
  7. contex.clip();
  8. contex.drawImage('/image/faceDetect.png', 80,30,60,60); // 推进去图片,这里注意头像坐标要在圆形区域内
  9. contex.draw();
  10. }
  11. })