如何僅在屏幕上調整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畫布的大小？

回答

相關問題