Question

我正在使用画布使用html5进行艺术项目：

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

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

Answer 1

如果按比例缩放以避免失真，可以使用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>

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

1 个答案: