Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2016, 20:41
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

Canvas проблемы
Как убрать горизонтальную линию?

И почему разработчики, решили использовать радианы, а не градусы?

https://jsfiddle.net/0kujfucq/
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2016, 20:59
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,417

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

А радианы всегда удобнее в машинных вычислениях.
__________________
29375, 35

Последний раз редактировалось Aetae, 15.10.2016 в 21:18.
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2016, 21:08
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

Как ещё сделать, что бы, когда функция заново запустилась, то предыдущее изображение удалилось?

https://jsfiddle.net/53rvaLas/
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2016, 21:17
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,417

context.clearRect(0, 0, canvas.width, canvas.height);
Вообще рекомендую почитать любой урок по canvas от начала и до конца, там не так много функций и таких элементарных вопросов не останется.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2016, 10:13
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

Почему текст не по центру?
https://jsfiddle.net/cu962314/
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2016, 11:26
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,417

DivMan, потому что 0,0 - это не центр, а левый верхний угол. Вроде очевидно. *с сомнением пожал плечами*
__________________
29375, 35
Ответить с цитированием
  #7 (permalink)  
Старый 22.12.2016, 23:11
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

Почему у снеговика нос не раскрашивается в оранжевый цвет, если я ему прописал ctx.fill()?

https://jsfiddle.net/bxa1zrbq/

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="200" height="400"></canvas>

	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		var circle = function (x, y, radius, color) {
			ctx.strokeStyle = color;
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			
		};

		ctx.lineWidth = 2;

		circle(100, 100, 50, 'black');
		ctx.stroke();

		circle(80, 90, 10, 'black');
		ctx.fill();
		circle(120, 90, 10, 'black');
		ctx.fill();
		circle(100, 110, 10, 'orange');
		ctx.fill();

		circle(100, 220, 70, 'black');
		ctx.stroke();

		circle(100, 195, 10, 'black');
		ctx.fill();
		circle(100, 220, 10, 'black');
		ctx.fill();
		circle(100, 245, 10, 'black');
		ctx.fill();
	</script>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 23.12.2016, 12:46
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

Правильно ли я сделал?

Нужно написать код, рисующий окружность радиусом в 3 пикселя под курсором мышки каждый раз, когда вы передвигаете мышку над «холстом».

Поскольку это событие возникает при малейшем перемещении курсора,
окружности по мере движения мышки будут сливаться в линию.

Последний раз редактировалось DivMan, 23.12.2016 в 12:49.
Ответить с цитированием
  #9 (permalink)  
Старый 23.12.2016, 12:48
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 415

<script>
	  var clickHandler = function () {

		var canvas = document.createElement('canvas');
		canvas.width = 9;
		canvas.height = 9;
		canvas.setAttribute('class', 'canvas')
		document.body.appendChild(canvas)
	    var canvas = document.querySelectorAll("canvas");
	    
	    for(var i = 0; i < canvas.length; i++){
	    	var ctx = canvas[i].getContext("2d");
	      	ctx.lineWidth = 2;
	      	ctx.strokeStyle = "Green";
	      	ctx.beginPath();
	      	ctx.arc(5, 5, 3, 0, Math.PI * 2, false);
	      	ctx.stroke();	
	    }
    
};

document.addEventListener('mouseover', clickHandler)
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas, проблемы с отрисовкой изображений sunAirway Общие вопросы Javascript 4 07.01.2016 21:21
Проблемы с canvas Georrg Общие вопросы Javascript 3 07.04.2015 15:29
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 15:46
Проблемы с Canvas Verhal Общие вопросы Javascript 1 24.01.2012 19:51
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37