<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片 绘制</title>
<style>
#canvas {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<canvas id="canvas">浏览器不支持 canvas </canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
// 图片：ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
var img = new Image();
img.src = "./images/bg.jpg";
img.onload = function () {
ctx.drawImage(img, 0, 0); // 保持图片原始尺寸绘制 1280 * 1280
ctx.drawImage(img, 0, 0, 200, 200); // 按照宽高拉伸图片，等比： 200 * 200
ctx.drawImage(img, 0, 200, 300, 200); // 按照宽高拉伸图片，不等比： 200 * 300
};
</script>
</html>
网友评论