HTML5 Canvas – 使用图片

在HTML5中，Canvas是一个用于绘制图形的元素。它可以用来实现各种各样的图片效果，包括使用图片。本文将讲解如何使用图片在Canvas中绘制。

绘制图片

首先，我们需要有一张图片。在HTML中，我们可以使用<img>标签来加载图片，然后在Canvas中绘制该图片。

HTML代码：

<img id="myImg" src="example.jpg" alt="my image" />
<canvas id="myCanvas"></canvas>

使用JavaScript代码获得Canvas对象和图片对象：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImg");

有了Canvas对象和图片对象，我们可以使用Canvas API来绘制图片：

ctx.drawImage(img, x, y);

该方法需要三个参数：图片对象、左上角x坐标和左上角y坐标。

下面是一个绘制图片的完整例子：

HTML代码：

<img id="myImg" src="example.jpg" alt="my image" />
<canvas id="myCanvas"></canvas>

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImg");

ctx.drawImage(img, 10, 10);

裁剪图片

有时，我们可能需要裁剪一张图片，以便让它更适合我们的设计需求。在Canvas中，我们可以使用drawImage()方法的第5个和第6个参数来裁剪图片。

ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

sx：开始剪切的x坐标位置。
sy：开始剪切的y坐标位置。
swidth：被剪切图像的宽度。
sheight：被剪切图像的高度。
x：在画布上放置图像的x坐标位置。
y：在画布上放置图像的y坐标位置。
width：要使用的图像的宽度。（伸展或缩小图像）
height：要使用的图像的高度。（伸展或缩小图像）

下面是一个裁剪图片的例子，我们只保留图片原图的中间部分：

HTML代码：

<img id="myImg" src="example.jpg" alt="my image" />
<canvas id="myCanvas"></canvas>

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImg");

ctx.drawImage(img, 100, 100, 100, 100, 10, 10, 100, 100);

旋转图片

在Canvas中，我们可以使用rotate()方法来旋转图片。

ctx.rotate(angle);

该方法需要一个参数：角度，单位是弧度。

下面是一个旋转图片的例子：

HTML代码：

<img id="myImg" src="example.jpg" alt="my image" />
<canvas id="myCanvas"></canvas>

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImg");

ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
ctx.drawImage(img, -50, -50, 100, 100);
ctx.restore();