Какова связь между размером и разрешением HTML5 canvas?

Есть ли способ, с помощью которого я могу создать холст большого размера, но с низким разрешением. Я'м объявив холст с синтаксисом, Я'Я запускаю приведенный выше код на 7-дюймовом планшете, и холст занимает половину экрана холста. Есть ли способ, которым я могу создать холст, который снова покрывает половину экрана, но имеет более низкое разрешение (более низкое качество изображения). На самом деле я рисую что-то на холсте, а затем сохраняю это как изображение, используя canvas.toDataURL (). Я неМне нужно получить хорошее качество изображения, но я хочу уменьшить размер создаваемого изображения.

Прости меня, если этоглупый вопрос

 DCoder23 июн. 2013 г., 14:49
Атрибуты HTML (width="700" height="1000") Опишителогический размер холста, то есть сколько пикселей теоретически можно разместить на холсте и адресовать индивидуально. Свойства CSS (canvas#mycanvas {width: 700px; height: 1000px;}) опишите визуальный размер указанного холста. Браузер растянет холст логические пиксели для размещения в визуальной области.

Ответы на вопрос(1)

pt):

    canvas.width=canvas1.width*scaleFactor;
    canvas.height=canvas1.height*scaleFactor;

Предупреждение: если вы масштабируете холст с помощью CSS, вы, скорее всего, будете искажать изображения, нарисованные на холсте

Затем вы можете масштабировать свое изображение, используя некоторые дополнительные аргументы дляcontext.drawImage

    var scaleFactor=0.50;

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

Вот код и скрипка:http://jsfiddle.net/m1erickson/6m8kg/




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




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


Ваш ответ на вопрос