如何仅在屏幕上调整HTML画布的大小？

-2

我正在使用canvas制作一个带有html5的艺术项目：如何仅在屏幕上调整HTML画布的大小？

我需要在画布上绘制2200px/1600px（宽度/高度），但我必须在较小的窗口中显示它在我的网站上（600px/400px ），但在客户端修改后，我需要将此画布转换为原始宽度和高度（2200像素/ 1600）的图像。

<canvas id="iBack" style="width:<?= $backgroundWidth ?>px; height:<?= $backgroundHeigth ?>px; z-index: 0; border: 1px dotted red; "></canvas>

来源

2014-01-07 user3169171

所以你的问题是什么？ –

请分享您尝试使用的部分代码。你会遇到一些挑战。 1）尺度非常粗糙，因此图像看起来不错，需要逐步缩小尺寸（如果仅使用矢量，则不那么重要）。 2）输入坐标也必须缩放（反之亦然）。在缩放状态下为1：1意味着您的结果点将被量化为缩放因子，如果您绘制例如线条，则缩放因子可能看起来不太好 - 事实上，对于矢量，根本无法完成画布缩放当他们需要缩放时（缩放/最终）。 – K3N

如果按比例缩放以避免失真，则可以使用css。

var scale=2200/600; 
canvas.style.width*=scale; 
canvas.style.height*=scale;

这可能会使缩放后图像+文本看起来过于像素化。

如果您的口味太像素化，您可以使用缩放文本重新绘制较大的原始图像。

这里的代码和演示：http://jsfiddle.net/m1erickson/dZ4D6/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var scale=1.0; 
    var fontsize=36; 
    var fontface="verdana"; 
    var fullImageWidth,fullImageHeight; 

    var img=new Image(); 
    img.onload=function(){ 
     redraw(img,"Hello",20,35,1.25); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png"; 

    function redraw(img,text,textX,textY,scale){ 

     canvas.width=img.width*scale; 
     canvas.height=img.height*scale; 

     // draw the scaled image 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width*scale,img.height*scale); 

     ctx.font=(fontsize*scale)+"px "+fontface; 

     // draw the scaled text 
     ctx.fillText(text,textX*scale,textY*scale); 

    } 

    $("#redraw").click(function(){ 
     if(scale==1.00){ 
      scale=0.50; 
     }else{ 
      scale=1.00; 
     } 
     redraw(img,"Hello",20,35,scale); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="redraw">Redraw</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

来源

2014-01-07 17:38:52 markE

如何仅在屏幕上调整HTML画布的大小？

回答

相关问题