Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.12.2015, 19:18
Интересующийся
Отправить личное сообщение для osetr Посмотреть профиль Найти все сообщения от osetr
 
Регистрация: 07.11.2014
Сообщений: 21

размеры пикселей canvas
подскажите, как задать длину и ширину для пикселей? Например хочу задать границы, ширину и высоту канваса = 10 пикселей, где каждый пиксель 10х10 . Что-то на подобии этого, но так не получается.
<html>
	<head>
		<title> test </title>
	</head>
	<body>
		<canvas id="example" style="border:10px solid #000"></canvas>	
		<script>
			
			var canvas = document.getElementById("example");
			var ctx = canvas.getContext("2d"); 
			ctx.beginPath();
			ctx.lineWidth = 10;
			
			canvas.width  = 10;
			canvas.height = 10;

			ctx.stroke();	
			
		</script>
	</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 27.12.2015, 19:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Во-Во, я тут тож под Новый год хочу, чтобы пиксел зарплаты(тьху - рубль) стоил 10 долларов, а не один пиксел!
=========================

Наверно мон задать css преобразование, изменения масштаба,
Рыть в строну:transform: scale(sx[, sy]); http://htmlbook.ru/css/transform

Последний раз редактировалось Deff, 27.12.2015 в 19:50.
Ответить с цитированием
  #3 (permalink)  
Старый 27.12.2015, 20:00
Интересующийся
Отправить личное сообщение для osetr Посмотреть профиль Найти все сообщения от osetr
 
Регистрация: 07.11.2014
Сообщений: 21

Да примерно это и имел ввиду. но теперь появилась другая проблема. канвас выходит за пределы браузера. С этим что посоветуете ?
<html>
	<head>
		<title> test </title>
	</head>
	<body>

		
		<canvas id="example" style="border:10px solid #000; transform:scale(10)" ></canvas>	
		<script>
			
			var canvas = document.getElementById("example");
			var ctx = canvas.getContext("2d"); 
			ctx.beginPath();
			ctx.lineWidth = 10;
			
			canvas.width  = 10;
			canvas.height = 10;

			ctx.stroke();	
			
		</script>
	</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 27.12.2015, 20:38
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,671

Сообщение от osetr Посмотреть сообщение
С этим что посоветуете ?
Уменьшить масштаб в 10 раз...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas, заливка прилегающих пикселей. Repka (X)HTML/CSS 6 16.05.2015 22:44
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16