HTML canvas drawImage() 方法

在Web前端开发中，HTML5的Canvas元素为我们提供了一个强大的绘图功能。其中，drawImage() 方法是Canvas API中一个非常重要的方法，它允许我们在Canvas上绘制图片。

drawImage() 方法的语法

drawImage() 方法有三种语法形式：

1. drawImage(image, dx, dy)
2. drawImage(image, dx, dy, dWidth, dHeight)
3. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

其中，参数说明如下：

• image: 要绘制到Canvas上的图片，可以是一个Image对象、Canvas对象或者Video对象。
• sx: 图片剪切的起始 x 坐标
• sy: 图片剪切的起始 y 坐标
• sWidth: 图片剪切的宽度
• sHeight: 图片剪切的高度
• dx: 绘制图片的起始 x 坐标
• dy: 绘制图片的起始 y 坐标
• dWidth: 绘制图片的宽度
• dHeight: 绘制图片的高度

示例代码

绘制一张图片到Canvas上

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ----------- ----------
-------
------
  ------- ------------- ----------- ----------------------
  --------
    --- ------ - ------------------------------------
    --- --- - ------------------------
    --- --- - --- --------
    ------- - ------------
    ---------- - ---------- -
      ------------------ -- ---
    --
  ---------
-------
-------

绘制一部分图片到Canvas上

-- -------------------- ---- -------
--------- -----
------
------
  ------------- ----------- ----------
-------
------
  ------- ------------- ----------- ----------------------
  --------
    --- ------ - ------------------------------------
    --- --- - ------------------------
    --- --- - --- --------
    ------- - ------------
    ---------- - ---------- -
      ------------------ --- --- ---- ---- -- -- ---- -----
    --
  ---------
-------
-------

总结

通过drawImage() 方法，我们可以在Canvas上绘制各种图片，实现丰富多彩的图形效果。在实际开发中，我们可以结合其他Canvas API方法，如绘制文本、绘制形状等，实现更加复杂的绘图功能。希望本文对你有所帮助，谢谢阅读！