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

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

jquery css html html5-canvas

Jquery 如何仅在屏幕上调整html画布的大小？,jquery,css,html,html5-canvas,Jquery,Css,Html,Html5 Canvas,我正在使用画布进行html5艺术项目：我需要在画布2200px/1600px（宽度/高度）上绘制，但我必须在较小的窗口（600px/400px）中在我的网站上显示，但在客户端修改后，我需要将此画布转换为具有原始宽度和高度（2200px/1600）的图像如果按比例缩放以避免失真，则可以使用css var scale=2200/600; canvas.style.width*=scale; canvas.style.height*=scale; 这可能会使图像+文本在缩放后看起来过于像素化如

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

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

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

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

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

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

下面是代码和演示：


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var标度=1.0；
var-fontsize=36；
var fontface=“verdana”；
var fullImageWidth、fullImageHeight；
var img=新图像（）；
img.onload=函数（）{
重画（img，“你好”，20,35,1.25）；
}
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
函数重绘（img、text、textX、textY、scale）{
画布宽度=图像宽度*比例；
画布高度=图像高度*比例；
//绘制缩放图像
ctx.drawImage（图像，0,0，图像宽度，图像高度，0,0，图像宽度*比例，图像高度*比例）；
字体=（字体大小*比例）+“px”+字体脸；
//绘制缩放文本
ctx.fillText（text，textX*比例，textY*比例）；
}
$（“#重绘”）。单击（函数（）{
如果（比例==1.00）{
比例=0.50；
}否则{
比例=1.00；
}
重画（img，“你好”，20,35，比例）；
});
}); // end$（函数（）{}）；
重新绘制

那么您的问题是什么呢？请分享一些您尝试使用的代码。您将在这里遇到一些挑战。1）比例相当粗糙，因此要使图像看起来很好，您需要逐步缩小比例（如果只使用向量，则不太重要）。2）输入坐标也必须缩放（另一种方式）。在缩放状态下为1:1意味着您的结果点将量化为缩放因子，如果您绘制例如线，这可能看起来不太好-事实上，对于向量，根本没有点进行画布缩放，因为您只需在需要缩放点时缩放点（缩放/最终）。

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

<!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>