Canvas 如何使用javascript（仅限html5 css3）实现——点击按钮时在canavs上缩放图像的效果？

我正在尝试使用电子秤，但它不能正常工作。 Plz建议

我的代码

function zoomIn() {                                                                   
    var canvas = document.getElementById('myCanvas');                                     
    var context = canvas.getContext('2d');
    context.scale(0.75, 0.75);                                                  
    context.drawImage(canvas, 0, 0);
    cleanTextOnCanvas();
}



function zoomOut() {
    var canvas = document.getElementById('myCanvas')                                          
    var context = canvas.getContext('2d');
    context.scale(1.5, 1.5);
    cleanCanvas();
    cleanTextOnCanvas();                                                 
}

---

有人能帮忙吗？

有几种方法可以进行缩放。其中一些方法很快变得复杂

我发现用

drawImage

的缩放版本缩放图像比用

context.scale

缩放图像要简单得多

使用

drawImage

进行缩放的工作原理如下：

• 使用

  context将[0,0]原点重置为图像的中心点。translate

• 使用drawImage的缩放版本可以在图像的缩放大小和适当的左上角缩放和重新定位图像

具有原始大小图像的画布，可进行缩小和放大

下面是示例代码和演示：

var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var cw、ch、iw、ih；
var currentScale=1.00；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/flower.png";
函数start（）{
//缓存图像大小并将画布大小设置为图像大小
cw=iw=canvas.width=img.width；
ch=ih=canvas.height=img.height；
//激活缩放按钮
document.getElementById（'zoomOut'）。onclick=function（）{
currentScale/=1.1；
缩放（当前缩放）；
};
document.getElementById（'zoomIn'）。onclick=function（）{
电流标度*=1.1；
缩放（当前缩放）；
};
缩放（当前缩放）；
}
函数缩放（缩放）{
//清理画布
clearRect（0,0，cw，ch）；
//将[0,0]原点重置为中心
//使用context.translate创建画布的
翻译（cw/2，ch/2）；
//使用drawImage的缩放版本重新绘制图像
var newWidth=iw*刻度；
var newHeight=ih*刻度；
context.drawImage(
//我们的绘图来源是img
img，
//从整个img开始
0,0，最小宽度，最小高度，
//以其缩放尺寸绘制img
//由于[0,0]现在位于中心画布，请重置x，y
//为缩放图像大小的一半
-newWidth/2，-newHeight/2，newWidth，newHeight
);
//清理，通过撤消最后一个translate（）重置画布原点
翻译（-cw/2，-ch/2）；
//做你的事！
//cleanTextOnCanvas（）；
}

body{背景色：象牙；}
画布{边框：1px纯红；}

缩小
放大