Почему метод рисования холста drawImage масштабируется?

Я пытаюсь нарисовать картинку на холсте шириной 150 пикселей и высотой 150 пикселей со следующим кодом. Однако изображение, похоже, масштабируется с атрибутами ширины и высоты, которые я установил на холст (я устанавливаю ширину 500 пикселей и высоту до 300 пикселей). Почему холст работает таким образом? Как я могу нарисовать изображение на холсте с абсолютным размером в px?Почему метод рисования холста drawImage масштабируется?

спасибо!

<head> 
    <meta charset="UTF-8"> 
    <title>Base</title> 
    <script type="text/javascript" src="./js/jquery-1.10.1.js"></script> 
    <script type="text/javascript"> 
     var img = new Image(); 

     $(window).ready(function() { 
      img.src = "./Images/img.jpg";; 

      ctx = document.getElementById("main").getContext("2d"); 

      img.onload = function() { 
       ctx.drawImage(img, 0, 0, 150, 150); 
      } 
     }); 

    </script> 
</head> 

<body> 
    <canvas id="main" style="background-color:yellow; width:500px; height:300px; z-index:1; position:absolute;"></canvas> 
</body>

источник

2013-11-21 darklord

Вы должны установить фактическое разрешение в пикселях холста, то есть, установить количество строк и столбцов пикселей (с помощью width и height атрибуты на canvas тега). В противном случае вы просто получите холст с разрешением по умолчанию, масштабированным по ширине и высоте, как определено вашим CSS.

Редактировать: Подумайте об этом таким образом. Когда вы помещаете холст в DOM, вы, по существу, объявляете нечто вроде изображения с манипуляцией с определенной шириной и высотой в пикселях. Теперь это изображение можно масштабировать произвольно. Итак, если у вас есть холст 200x200, но объявляйте в CSS, что размер холста 400px на 200px, каждый пиксель холста будет отображаться с высотой в два пикселя (с сглаживанием). Таким образом, любое изображение, нарисованное на этом холсте, будет в два раза выше, чем обычно. Поэтому, если вы хотите, чтобы ширина и высота пикселя на холсте представляли пиксель, отображаемый на экране **, вы хотите установить ширину и высоту фактического количества задействованных пикселей вместо использования CSS.

** Пиксели не могут буквально представлять пиксель на экране. Например, я пишу это как Surface Pro, который имеет масштабирование dpi для многих приложений, в противном случае кнопки приложений будут очень крошечными, и для активации будет немного сложно надеть. Ширина экрана, который мой браузер видит в ширину, составляет 1920/1,5 = 1280. Я могу включить эту настройку для браузера, перезапустить его, и он увидит полный 1920 ... теперь, как это влияет на рендеринг изображений ? Я думаю, что браузер может отображать изображения с разрешением true-pixel resolution даже с этой настройкой; Windows не просто отображает некоторую размытую версию браузера, но мне нужно будет провести некоторое исследование, чтобы увидеть на самом деле то, что Windows в сочетании с браузером.

источник

2013-11-21 02:05:58 JayC

Достаточно ясно! Большое спасибо! – darklord

Почему метод рисования холста drawImage масштабируется?

ответ

Смежные вопросы