缩放画布。我究竟做错了什么答案

【问题标题】：Scaling a canvas. What am I doing wrong缩放画布。我究竟做错了什么
【发布时间】：2014-07-08 07:22:37
【问题描述】：

$('#myCanvas').click(function (e) { //Default mouse Position 
        console.log(e.pageX);
$("#myCanvas2").attr("width", e.pageX );
$("#myCanvas3").attr("width", e.pageX );
        var imageData = context.getImageData(0, 0, e.pageX,400);
context2.putImageData(imageData,0,0);
context3.putImageData(imageData,0,0);
context.clearRect ( 0 , 0 , 2000 , 2000 );
$("#myCanvas3").css("scale", "(-1, 1)" );
$("#myCanvas3").css("transform", "scale(-1,1)");

 var canvas4 = document.getElementById('myCanvas4');
 var context4 = canvas4.getContext('2d');
 context4.drawImage( myCanvas2, 0,0 );
 context4.drawImage(myCanvas3, e.pageX,0 );


context3.scale(3,3);
    });

我正在尝试使用 scale 命令缩放我的画布。

我做错了什么？

【问题讨论】：

到底出了什么问题？您有示例链接吗？
它似乎无法扩展。我已经在函数之外定义了我的上下文就好了。唯一似乎不起作用的是 scale 命令。
这个帖子应该有帮助：How to scale an imageData in HTML canvas?

标签： javascript canvas

【解决方案1】：

我不清楚你想做什么，但我想到了这些想法：

要获得准确的画布鼠标位置，请相对于画布元素进行计算：

$('myCanvas').click(function(e){

    var BB=canvas.getBoundingClientRect();
    var mouseX=parseInt(e.clientX-BB.left);
    var mouseY=parseInt(e.clientY-BB.top);
}

关于混合 CSS 和 Canvas：

CSS 缩放将作用于元素的中心。
画布比例将从原点开始运行（原点默认为 0,0）。
CSS 缩放不会影响 Canvas 绘图。因此，如果您使用 CSS 缩放“翻转”，然后将翻转的元素绘制到画布上，则生成的画布绘图不会翻转。
更改画布元素宽度也会自动清除画布内容。
更改 CSS 宽度将保留画布内容，但会将现有像素“拉伸”到新宽度（内容会出现变形）。

画布缩放命令仅影响在缩放命令之后完成的绘图。所以您的context3.scale(3,3) 不会影响您之前在 myCanvas3 上绘制的任何内容。

以下是在画布元素上水平翻转图像的方法：

示例代码和演示：http://jsfiddle.net/m1erickson/tSPB2/

var img=document.getElementById("theImg");
var iw=img.width;
var ih=img.height;
var canvas2=document.getElementById('myCanvas2');
var context2=canvas2.getContext('2d');
canvas2.width=iw;
canvas2.height=ih;
context2.save();
context2.translate(iw,0);
context2.scale(-1,1);
context2.drawImage(img,0,0);
context2.restore();

【讨论】：