图片（Images）

QML画布支持多种资源的图片绘制。在画布中使用一个图片需要先加载图片资源。在我们的例子中我们使用Component.onCompleted操作来加载图片。

  1.     onPaint: {
  2.         var ctx = getContext("2d")
  5.         // draw an image
  6.         ctx.drawImage('assets/ball.png', 10, 10)
  8.         // store current context setup
  9.         ctx.save()
  10.         ctx.strokeStyle = 'red'
  11.         // create a triangle as clip region
  12.         ctx.beginPath()
  13.         ctx.moveTo(10,10)
  14.         ctx.lineTo(55,10)
  15.         ctx.lineTo(35,55)
  16.         ctx.closePath()
  17.         // translate coordinate system
  18.         ctx.translate(100,0)
  19.         ctx.clip()  // create clip from triangle path
  20.         // draw image with clip applied
  21.         ctx.drawImage('assets/ball.png', 10, 10)
  22.         // draw stroke around path
  23.         ctx.stroke()
  24.         // restore previous setup
  25.         ctx.restore()
  27.     }
  29.     Component.onCompleted: {
  30.         loadImage("assets/ball.png")
  31.     }

在左边，足球图片使用10×10的大小绘制在左上方的位置。在右边我们对足球图片进行了裁剪。图片或者轮廓路径都可以使用一个路径来裁剪。裁剪需要定义一个裁剪路径，然后调用clip()函数来实现裁剪。在clip()之前所有的绘制操作都会用来进行裁剪。如果还原了之前的状态或者定义裁剪区域为整个画布时，裁剪是无效的。

图片（Images） - 图1