图像缩放到canvas之后绘制于离屏canvas
时间: 2023-12-05 14:39:15 浏览: 34
可以通过以下步骤将图像缩放到canvas之后绘制于离屏canvas:
1.创建一个离屏canvas,设置其宽高与原canvas相同。
2.在离屏canvas上绘制缩放后的图像。
3.将离屏canvas绘制到原canvas上。
具体实现代码如下所示:
```javascript
// 获取原canvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 创建离屏canvas
var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
var offscreenCtx = offscreenCanvas.getContext("2d");
// 加载图像
var img = new Image();
img.onload = function() {
// 缩放图像
var scale = 0.5;
var width = img.width * scale;
var height = img.height * scale;
// 在离屏canvas上绘制缩放后的图像
offscreenCtx.drawImage(img, 0, 0, width, height);
// 将离屏canvas绘制到原canvas上
ctx.drawImage(offscreenCanvas, 0, 0);
};
img.src = "image.png";
```