如果我调整了我的画布大小，我的createJS文本变得模糊了

Question

我使用createJS绘制画布内部。我的画布设置为使用resize（）函数占用浏览器窗口，以保持宽高比。

这是代码：

mytext = new createjs.Text("Lorem ipsum dolor sit amet 2","19px Calibri","#073949"); 
    mytext.x = 450 
    mytext.y = 300; 
    stage.addChild(mytext); 

    resize = function() { 
       var canvas = document.getElementById('canvas'); 
       var canvasRatio = canvas.height/canvas.width; 

       var windowRatio = window.innerHeight/window.innerWidth; 
       var width; 
       var height; 

       if (windowRatio < canvasRatio) { 
        height = window.innerHeight - 35; 
        width = height/canvasRatio; 
       } else { 
        width = window.innerWidth; 
        height = width * canvasRatio; 
       } 

       canvas.style.width = width + 'px'; 
       canvas.style.height = height + 'px';  
    }() 

会发生什么情况是，文字变得模糊（质量下降）时，画布大小调整。

http://i.imgur.com/RQOSajs.png VS http://i.imgur.com/Xwhf5c5.png

我怎样才能解决这个问题呢？

Answer 1

由于您使用CreateJS，您可以简单地调整画布和缩放整个阶段，在新的大小重新绘制一切：

// just showing width to simplify the example: 
var newWidth = 800; 
var scale = newWidth/myCanvas.width; 
myCanvas.width = newWidth; 
myStage.scaleX = myStage.scaleY = scale; 
myStage.update(); // draw at the new size. 

Answer 2

HTML5的Canvas元素可与两种不同尺寸

• 在屏幕上视觉尺寸，通过CSS控制的，就像你与canvas.style.width /高度设置
• 像素缓冲区的大小为绘图，通过画布元素上的数字宽度和高度像素属性进行控制。

浏览器将拉伸缓冲区以适合屏幕上的大小，所以如果两个值不是1：1的比例，文本看起来会模糊不清。

尝试添加以下几行代码

canvas.width = width; 
canvas.height = height; 

Answer 3

看看我的jsfiddle：https://jsfiddle.net/CanvasCode/ecr7o551/1/

基本上你只存储原始画布大小，然后用它来制定出新的位置和大小

HTML

<canvas id="canvas" width="400" height="400"> 
    Canvas was unable to start up. 
</canvas> 

<button onclick="resize()">Click me</button> 

javascript

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var originalWidth = canvas.width; 
var originalHeight = canvas.height; 

render = function() 
{ 
    context.fillStyle = "#DDD"; 
    context.fillRect(0,0, originalWidth * (canvas.width/originalWidth), originalHeight * (canvas.height/originalHeight)); 

    context.fillStyle = "#000"; 
    var fontSize = 48 * (canvas.width/originalWidth); 
    context.font = fontSize+"px serif"; 
    context.fillText("Hello world", 100 * (canvas.width/originalWidth), 200 * (canvas.height/originalHeight)); 
} 

resize = function() 
{ 
    canvas.width = 800; 
    canvas.height = 600; 
    render(); 
} 

render(); 

Answer 4

我创建了一个函数，在调整画布大小后调整屏幕上的所有元素。它保存原始宽度为900 px的元素的初始坐标和缩放比例，然后根据当前宽度比率相对于原始宽度比率更改它们。文本不再模糊/质量差。

resize = function() { 
      var canvas = document.getElementById('canvas'); 
      var canvasRatio = canvas.height/canvas.width; 

      var windowRatio = window.innerHeight/window.innerWidth; 
      var width; 
      var height; 

      if (windowRatio < canvasRatio) { 
       height = window.innerHeight; 
       width = height/canvasRatio; 
      } else { 
       width = window.innerWidth; 
       height = width * canvasRatio; 
      } 

      canvas.width = width; 
      canvas.height = height; 
      reziseElements(); 

     }; 


    reziseElements = function() 
      { 
       var canvrat = canvas.width/900; 

       //Simplified 
       stage.scaleX = stage.scaleY = canvrat; 

       //Old Version 
       /*for (i=0; i<stage.numChildren ;i++) 
       { 
        currentChild = stage.getChildAt(i); 

        if (typeof currentChild.oscaleX == 'undefined') 
        { 
         currentChild.oscaleX = currentChild.scaleX; 
         currentChild.ox = currentChild.x; 
         currentChild.oy = currentChild.y; 
        } 
       } 


       for (i=0; i<stage.numChildren ;i++) 
       { 
        currentChild = stage.getChildAt(i); 
        currentChild.scaleX = currentChild.scaleY = currentChild.oscaleX * canvrat  
        currentChild.x = currentChild.ox * canvrat 
        currentChild.y = currentChild.oy * canvrat 
       } */ 
      } 

Answer 5

@亚当的答案是正确的，只要缩放画布去。你做不是想用CSS来缩放，因为它会拉伸你的画布，而不是改变它的像素尺寸。改为使用JavaScript设置画布的宽度和高度。

stage.canvas.width = window.innerWidth; 
stage.canvas.height = window.innerHeight; 

正如您在您的评论指出，这只会改变画布大小，而不是重新定位或扩展您的内容。您将不得不手动执行此操作。这很简单。通常，我建议将您的调整大小侦听器放在HTML文件的JavaScript中，而不是放在帧脚本上。

---

首先，根据窗口大小和内容大小确定比例。您可以使用exportRoot.nominalBounds.width和exportRoot.nominalBounds.height这是第一帧的边界。如果您想扩展其他功能，请改为使用其nominalBounds。

请注意，nominalBounds会附加到从Flash导出的所有影片剪辑。如果启用多帧边界并想要使用这些边界，则必须修改方法。

主要想法是使用原始的，未缩放的大小的内容。

var bounds = exportRoot.nominalBounds; 
// Uses the larger of the width or height. This will "fill" the viewport. 
// Change to Math.min to "fit" instead. 
var scale = Math.max(window.innerWidth/bounds.width, window.innerHeight/bounds.height); 
exportRoot.scaleX = exportRoot.scaleY = scale; 

，如果你愿意，你就可以居中。

exportRoot.x = *window.innerWidth - bounds.width*scale)/2; 
exportRoot.y = *window.innerHeight - bounds.height*scale)/2; 

下面是一个使用简单形状的缩放内容的响应画布的快速示例： http://jsfiddle.net/lannymcnie/4yy08pax/

与Flash CC出口这样做又拿出了几次，所以这是我的名单上未来EaselJS演示包含在createjs.com和EaselJS GitHub中。

我希望这会有所帮助。