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

本文详细介绍在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 轴的位置。

02802-60p0lmmzfsl.png

实例:

<!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)
}

61453-21ktsxahe1x.png

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)
}

课程地址:http://edu.nodeing.com/course/80

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大地飞鸿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值