我正在创建一个允许用户使用 HTML5 和 canvas 元素创建场景的网站。
我打算为此使用KinecticJS，它看起来很棒。但我有一个问题我真的很苦恼。
由于我希望能够为用户提供更高质量的打印场景版本，因此我不能只给他们 800x600 像素的画布数据，因为打印时它会变得非常模糊。
我看到一些论坛建议简单地“扩大”您的canvas，然后保存该输出，但我担心这样做的性能成本。虽然这可能是我唯一的希望。
由于 KineticJS 使用图形层次来渲染场景，我认为可以使用 KinecticJS 创建场景，然后重新渲染（而不是缩放）相同的场景，只是这次放大位置等。 . 场景中的所有对象。
以前有没有人做过这样的事情？到目前为止，我仍处于研究阶段。
请注意，我显然了解 SVG，但我需要更大的浏览器支持，而且 IE 在 IE9 之前使用 VML，我严重怀疑我能否将 SVG/VML 场景转换为 PNG 并保持浏览器支持。
【问题讨论】：
您可以为单个“捕获帧”放大画布。
你有一个绘图函数或一个渲染函数。给它一个论点，如果该论点是正确的，请参考更大的背景。
var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to draw to....
function render(screenShot){
ctx = context;
if(screenShot){
if(!newCanvas){
newCanvas = document.createCanvas();
newContext = newCanvas.getContext('2d');
}
newCanvas.width = canvas.width * scaleFactor;
newCanvas.height = canvas.height * scaleFactor;
ctx = newContext;
newContext.scale(scaleFactor, scaleFactor); //Now all your previous drawing will autoscale
}
/* all your old draw code goes here,
change all your context calls to ctx */
if(screenShot){
YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
}
}
您可能想了解 toDataURL 的工作原理，以及它将为您提供什么。
这不会造成损失，因为您只需要在需要高质量的时候调用 render(true)
【讨论】：
对此我有另一个答案：
function makeBig(firstStage) {
newStage.setScale(2);
newStage.add(firstStage.getChildren()[0].clone());
}
这对我有用，一旦你知道怎么做就很容易了:)
【讨论】：