<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="ourCanvas" width="1100" height="1100" style="border:3px dashed #0094ff"></canvas>
<script>
var canvas = document.getElementById("ourCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "images/gho.jpg";
image.onload = function () {
//保持原大小绘制图片
ctx.drawImage(image, 30, 30);
//绘制图片时进行缩放
ctx.drawImage(image, 50, 320, 300, 180);
//从源位图中挖取一块
ctx.drawImage(image, 30, 50, 100, 100, 100, 600, 150, 150);
}
</script>
</body>
</html>