canvas基础入门系列教程(6)-绘制图片

最新推荐文章于 2025-07-02 16:11:33 发布

原创最新推荐文章于 2025-07-02 16:11:33 发布 · 365 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#canvas教程 #JavaScript教程 #css

javascript 同时被 2 个专栏收录

51 篇文章

订阅专栏

html5

10 篇文章

订阅专栏

本文详细介绍在Canvas中绘制、平铺、剪切图片的方法，包括drawImage的多种调用方式及参数解析，帮助开发者掌握高效图片处理技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.绘制图片

在canvas中使用到的图片并不是通过js去画的，如果每张图片都是用js去画，那么会相当麻烦，例如：游戏开发中的地图、背景、人物等，这些素材如果直接用js去画，先不考虑难度问题，就是画这些内容工作量就非常大了，因此，canvas提供了方法可以直接讲图片加载到canvas中，这样就方便多了

4.1.绘制图片体验

在canvas中绘制图片，实际上说的是把图片加载到canvas中，我们需要通过canvas的drawImage方法来完成

// 语法
ctx.drawImage(image, dx, dy)

参数说明

image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cvs{
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas width="600" height="300" id="cvs"></canvas>
  <script>
    var oCanvas = document.getElementById('cvs')
    var ctx = oCanvas.getContext('2d')
    var oImg = new Image()
    oImg.src = 'img/2019-01-17-16-24-40.png'
    oImg.onload = function () {
      ctx.drawImage(oImg, 0, 0)
    }
    
  </script>
</body>
</html>

4.2.drawImage方法的其他调用方式

drawImage还有两种调用方式，主要是传入参数的不同

// 第二种调用方式
ctx.drawImage(image, dx, dy, dWidth, dHeight);

参数说明

image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth 可选，在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。
dHeight 可选，在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放

这种方式只是比第一种方式多了宽度和高度设置，可以对图片进行缩放后显示到canvas上

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
  ctx.drawImage(oImg, 0, 0, 100, 200)
}

// 第三种调用方式
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数说明

image 图片对象
dx 目标画布的左上角在目标canvas上 X 轴的位置。
dy 目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth 可选，在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片宽度不会缩放。
dHeight 可选，在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放。
sx 可选，需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。
sy 可选，需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。
sWidth 可选，需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。
sHeight 可选，需要绘制到目标上下文中的，源图像的矩形选择框的高度。

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'
oImg.onload = function () {
  ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
}

sx, sy, sWidth, sHeight这4个参数操作的是源文件，根据这4个参数把图片截取下来，然后根据dx, dy, dWidth, dHeight这4个参数显示到canvas中

4.3.图片平铺

我们可以使用createPattern和fillRect来实现图片的平铺效果

// 语法
ctx.createPattern(image, repetition)

参数说明

image 图片对象
repetition 指定如何重复图像

说明：repetition可以取以下值
repeat  (both directions，水平和垂直放向都平铺)
repeat-x (horizontal only， 水平方向平铺)
repeat-y (vertical only， 垂直放向平铺)
no-repeat (neither， 不平铺)

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var oImg = new Image()
oImg.src = 'img/2019-01-17-17-15-44.png'

oImg.onload = function () {
  // ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
  var pattern = ctx.createPattern(oImg, 'repeat')
  ctx.fillStyle = pattern
  ctx.fillRect(0, 0, 300, 300)
}

4.4.图片剪切

做图片剪切需要用到clip方法

// 语法
ctx.clip()

剪切图片的步骤：

1. 绘制一个图形作为剪切区域

2. 调用clip方法

3. 绘制图片

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')

// 1. 绘制剪切区域
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 360 * Math.PI/180)
ctx.closePath()
ctx.strokeStyle = "red"
ctx.stroke()

// 2. 调用方法
ctx.clip()

// 3. 绘制被剪切图像
var oImg = new Image()
oImg.src = 'img/2019-01-17-16-24-40.png'

oImg.onload = function () {
  // ctx.drawImage(oImg, 50, 80, 100, 200, 30, 30, 100, 200)
  var pattern = ctx.createPattern(oImg, 'repeat')
  ctx.fillStyle = pattern
  ctx.fillRect(0, 0, 300, 300)
}