先看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas {
background: coral;
}
</style>
</head>
<body>
<img id="img" src="1.jpg">
<canvas id="canvas" width="400" height="400"></canvas>
<script src="main.js"></script>
</body>
</html>
(function () {
var con = document.getElementById("canvas").getContext("2d");
var img = document.getElementById("img");
function render() {
con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);
}
render();
})();
代码的效用是实现剪切一块图片放到指定位置。
但是上面的代码有一个问题，就是浏览器并不是每次刷新，图片都能正常剪切，只是偶尔成功，这就是因为异步。
解决此问题
(function () {
var con = document.getElementById("canvas").getContext("2d");
var img = document.getElementById("img");
function render() {
con.drawImage(img, 20, 20, 100, 100, 0, 0, 100, 100);
requestAnimationFrame(render);
}
render();
})();
这就行了，（吐槽：每次都刷新，还不信你不出来，异步我也得把你整出来。。
）