HTML5画布的大小和分辨率之间有什么关系_Html_Html5 Canvas

HTML5画布的大小和分辨率之间有什么关系

html html5-canvas

HTML5画布的大小和分辨率之间有什么关系,html,html5-canvas,Html,Html5 Canvas,是否有一种方法，我可以创建一个大尺寸但低分辨率的画布。我用语法声明画布。我在7英寸的平板电脑上运行上述代码，画布覆盖了画布屏幕的一半。有没有一种方法，我可以创建一个画布，再次覆盖屏幕的一半，但具有较低的分辨率（较低的图像质量）。实际上，我在画布上绘制了一些东西，然后使用canvas.toDataURL（）将其保存为图像。我不需要得到高质量的图像，但我想降低生成的图像的大小如果这是一个愚蠢的问题，请原谅。首先，按如下方式缩放画布元素（在javascript中）：警告：如果使用CSS缩放画布，

是否有一种方法，我可以创建一个大尺寸但低分辨率的画布。我用语法

声明画布。我在7英寸的平板电脑上运行上述代码，画布覆盖了画布屏幕的一半。有没有一种方法，我可以创建一个画布，再次覆盖屏幕的一半，但具有较低的分辨率（较低的图像质量）。实际上，我在画布上绘制了一些东西，然后使用canvas.toDataURL（）将其保存为图像。我不需要得到高质量的图像，但我想降低生成的图像的大小

如果这是一个愚蠢的问题，请原谅。首先，按如下方式缩放画布元素（在javascript中）：

警告：如果使用CSS缩放画布，可能会扭曲画布上绘制的图像

然后，您可以使用一些添加到

context.drawImage

    var scaleFactor=0.50;

    ctx2.drawImage(img, 0,0,img.width,img.height,
                            0,0,img.width*scaleFactor,img.height*scaleFactor);

下面是代码和小提琴：


正文{背景色：象牙色；填充：15px；}
画布{边框：1px纯红；}
$（函数（）{
var canvas1=document.getElementById（“canvas1”）；
var ctx1=canvas1.getContext（“2d”）；
var canvas2=document.getElementById（“canvas2”）；
var ctx2=canvas2.getContext（“2d”）；
var scaleFactor=0.50；
var img=document.createElement（“img”）；
img.onload=函数（）{
//在较大的画布上绘制全尺寸图像
ctx1.drawImage（img，0,0）；
//调整画布的大小
//不要使用css调整大小，它会扭曲你的图像
//使用添加的drawImage参数完成缩放
canvas2.width=canvas1.width*scaleFactor；
canvas2.height=canvas1.height*scaleFactor；
//在第二个画布中绘制缩小的图像
ctx2.图纸图像（img，0,0，img.宽度，img.高度，
0,0，img.宽度*比例因子，img.高度*比例因子）；
}
img.src=“faces.png”；
}); // end$（函数（）{}）；
顶部帆布是全尺寸的


底部画布按比例缩小

HTML属性（

width=“700”height=“1000”

）描述画布的逻辑大小，即理论上可以在画布中放置多少像素，以及每个像素的地址。CSS属性（

canvas#mycanvas{width:700px；height:1000px；}

）描述了所述画布的视觉大小。浏览器将拉伸画布的逻辑像素以适应可视区域。

    var scaleFactor=0.50;

    ctx2.drawImage(img, 0,0,img.width,img.height,
                            0,0,img.width*scaleFactor,img.height*scaleFactor);

<!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; padding:15px;}
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas1=document.getElementById("canvas1");
    var ctx1=canvas1.getContext("2d");
    var canvas2=document.getElementById("canvas2");
    var ctx2=canvas2.getContext("2d");

    var scaleFactor=0.50;

    var img=document.createElement("img");
    img.onload=function(){

        // draw the image full-size on the larger canvas
        ctx1.drawImage(img,0,0);

        // resize the canvas 
        // Don't use css to resize, it will distort your image
        // The scaling is done with the added drawImage arguements
        canvas2.width=canvas1.width*scaleFactor;
        canvas2.height=canvas1.height*scaleFactor;

        // draw a scaled-down image into the second canvas
        ctx2.drawImage(img, 0,0,img.width,img.height,
                            0,0,img.width*scaleFactor,img.height*scaleFactor);

    }
    img.src="faces.png";


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

</head>

<body>
    <p>Top canvas is full-sized</p>
    <canvas id="canvas1" width=400 height=242></canvas><br>
    <p>Bottom canvas is scaled down</p>
    <canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>