Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: рисование canvas

Делаю простенький редактор фотографий на canvas
Есть такой код
Класс рисования:
function Sketch(name) {
        this.startDrawing = function(e) 
        {
	       this.isDrawing = true;
	       this.context.beginPath();
	       this.context.moveTo(e.pageX - this.canvas.offsetLeft, e.pageY - this.canvas.offsetTop);
        }

        this.draw = function(e) 
        {
	       if (this.isDrawing == true)
	       {
		      var x = e.pageX - this.canvas.offsetLeft;
		      var y = e.pageY - this.canvas.offsetTop;
		      this.context.lineTo(x, y);
		      this.context.stroke();
	       }
        }

        this.stopDrawing = function() 
        {
            this.isDrawing = false;	
        }
    
      this.isDrawing;
        
      this.canvas = document.getElementById(name);
      this.context = this.canvas.getContext("2d");
     // Подключаем требуемые для рисования события
      this.canvas.onmousedown = this.startDrawing.bind(this);
      this.canvas.onmouseup = this.stopDrawing.bind(this);
      this.canvas.onmouseout = this.stopDrawing.bind(this);
      this.canvas.onmousemove = this.draw.bind(this);
      //this.canvas.bind('mousedown mouseup mousemove mouseout', this.onEvent);
      this.context.lineWidth = 4;
      this.context.strokeStyle = '#ff0';
      this.context.lineJoin = "round";
      this.context.lineCap = "round";
};


Т.к. редактор должен быть адаптинвым ширину и выосту картинки приходиться высчитывать пропорционально на js
jQuery(document).ready(function () {    

var block = $('#block-canvas').width();

var new_height = (wcanvas * height) / width;

if(width < block)
{
    $('#sketch').width(width+'px');
}
else
{
    $('#sketch').width('100%'); 
}
    

    var wcanvas = $('#sketch').width();
    var new_height = (wcanvas * height) / width;
    $('#sketch').height(new_height);
 
 var sketch = new Sketch('sketch');

В последней строке я запускаю класс и он работает - рисует НО расположение линий не правильное хотя координаты вроди правильные... вообщем так не объяснить, посмотрите как оно работает сейчас
соответсвенно нужно что бы рисовалось правильно.
Но если не задавать высоту и ширину с помощью js то рисуется правильно.
В чем проблема может быть?
Ответ: Надо забрать совет

Сообщение от warren buffet
вот тут скачай
Не качай там ничего, блин, это же гитхаб, я сразу и не заметил. Как обычно от гитхаба надо бежать быстро и далеко. Ищи другие примеры из нормальных источников. Чиканутые гитхабовцы горят в аде.
Вопрос: Canvas не рисует линии

Ребята, помогите плиз. Новичок в JS, туплю...

рисую в цикле линии в Canvas, координаты линий находятся в числовом массиве. Почему-то, вот такое линии рисует:
Код:
context.moveTo(0, 50);
context.lineTo(100, 50);
а если передаю в качестве координат массив, то ничего не рисуется:
Код:
context.moveTo(masXX[i-1],masYY[i-1]);
context.lineTo(masXX[i-1],masYY[i]);
массив числовой. typeof выдает number

Помогите плиз
Ответ: warren buffet,
Цитата:
Так у тебя рисование снаружи цикла
context.stroke() делает обозначенные контуры видимыми. "Рисуется" всё в цикле
Вопрос: Магия исчезающего canvas'a

Выручайте друзья! Ума не приложу в чём беда.

Есть canvas на странице, при разворачивании браузера, canvas - исчезает. Проблема наблюдается только в опере (вплоть до последних версий). Никаких "периодических методов" не вызывается (т.е. setTimeout, setInterval - отсутствуют). Даже в голову не приходит, что может провоцировать такое поведение.

Особенности:
1) Если браузер открыт в окне (не во весь экран), то после разворачивания - всё нормально.

2) Когда canvas пропадает, достаточно перейти на другую вкладку в браузере и вернутся, как он появится снова.

Пример сие-чуда можно посмотреть здесь:


Выкладываю код самого canvas'a, но честно, не думаю, что проблема в нём:

var range = 30; //Толщина кисти по умолчанию
	var xpositionmouse = '';
	var imageColor = '0'; //Цвет текстуры
	
	function canvasHelper(cat, pic, number){
		$(".canvas_helper").css("backgroundImage", "url('cats/" + cat + "/" + pic + "/" + number + ".png')");
		$(".canvas_helper").css("display", "inherit");
	}
	
	function closeCanvasHelper(){
		$(".canvas_helper").css("display", "none");
	}
	
	function targetColor(color){
		for(var i = 0; i < 7; i++){
			$("#textureimage" + i).css("border", "3px solid #FFF");
		}
		
		$("#textureimage" + color).css("border", "3px solid #000");
	}
	
	function changeColor(color){
		var texture = document.getElementById(color); 
		var pattern = ctx.createPattern(texture, 'repeat');
		ctx.fillStyle = pattern;
	}
	
	function SeeImg(color){
		img = document.getElementById(color);
		ctx.drawImage(img,0,0);
	}

	
	//Инициализация канвас
	var canvas,ctx,w,h;
	var img,img2,startDraw,texture,pattern,x1,x2,color;
	function init(){
		canvas = document.getElementById("canvas");
		canvas.width = widthcolor;
		canvas.height = heightcolor;
		w = canvas.width;
		h = canvas.height;
		ctx = canvas.getContext('2d');
		ctx.strokeRect(0,0,w,h);

		//Отрисовка фонового изображения
		/*img = document.getElementById("img0");
		ctx.drawImage(img,0,0);*/
		SeeImg("img0");
		
		
		changeColor('img0');
		
		//Функция отрисовки
		drawing = function(tool){
		x1=0;
		x2=(Math.PI/180)*360;
			if(startDraw){
				ctx.lineWidth = range;
				ctx.lineCap = 'round';
				switch(tool){
					case 'pen':
					ctx.beginPath();
					ctx.arc(x, y, range, x1, x2);
					ctx.fill();
					window.xpositionmouse = window.xpositionmouse + x + ',' + y + ',' + range + ':'+imageColor+'\n';
					break;
				}
			}
		}
		
		startDraw = true;
		
		//События мыши
		canvas.addEventListener('mouseover', function(e){
			canvas.addEventListener('mousemove', function(e){
				e = e || event;
				var coords = this.getBoundingClientRect();
				x = Number(e.clientX - coords.left);
				y = Number(e.clientY - coords.top);
				//x = e.pageX - canvas.offsetLeft; //Координата X
				//y = e.pageY - canvas.offsetTop; //Координата Y
				drawing('pen');
			}, false);
		}, false);
		
		
		function print_img() {
			var dataURL = canvas.toDataURL();
		}
	}



Также, прикрепляю скриншоты проблемы(до и после), заранее, благодарю всех!




Ребят, я не прошу вас ковыряться в коде всего сайта, просто, если кому-то известно, из-за чего может такое случиться, прошу написать. Не думаю, что есть сильно много вещей, которые могут так "напакастить". Какая-то специфическая особенность оперы это вызывает или какая-то моя ошибка, которую исправляют все браузеры кроме оперы..
Ответ:
Сообщение от Rise
fireballpro100, это баг оперы, решение:
canvas {
	-webkit-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
Rise, спасибо большое, помогло!
Вопрос: Прыгающие мячи с помощью canvas

Как увеличить количество мячей циклом? Я пытался, у меня не получается, сейчас я их размножаю вручную

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
   <canvas id="canvas" width="400" height="400"></canvas>
   
   <script>
     var Ball = function () {
			this.x = Math.floor(Math.random() * 400);
			this.y = Math.floor(Math.random() * 400);
			this.xSpeed = -2;
			this.ySpeed = 3;
		};


		var circle = function (x, y, radius, fillCircle) {
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			if (fillCircle) {
				ctx.fill();
			} 
			else {
				ctx.stroke();
			}
		};

		Ball.prototype.draw = function () {
			circle(this.x, this.y, 3, true);
		};

		Ball.prototype.move = function () {
			this.x += this.xSpeed;
			this.y += this.ySpeed;
		};

		Ball.prototype.checkCollision = function () {
			if (this.x < 0 || this.x > width) {
				this.xSpeed = -this.xSpeed;
			}
			if (this.y < 0 || this.y > height) {
				this.ySpeed = -this.ySpeed;
			}
		};

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

		
		var ball = new Ball();
		var ball2 = new Ball();
		var ball3 = new Ball();
		var width = canvas.width;
		var height = canvas.height;	


		/*
		for(var i = 0; i < 1; i++){
			var ball = new Ball()

			setInterval(function () {
			ctx.clearRect(0, 0, width, height);
			ball.draw();
			ball.move();
			ball.checkCollision();
			
			ctx.strokeRect(0, 0, width, height);
		}, 30);
			
		}
		*/

		setInterval(function () {
			ctx.clearRect(0, 0, width, height);
			ball.draw();
			ball.move();
			ball.checkCollision();

			ball2.draw();
			ball2.move();
			ball2.checkCollision();

			ball3.draw();
			ball3.move();
			ball3.checkCollision();
			
			ctx.strokeRect(0, 0, width, height);
		}, 30);
   </script>
  </body>

</html>
Ответ:
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
   <canvas id="canvas" width="400" height="400"></canvas>
   
   <script>
     var Ball = function () {
			this.x = Math.floor(Math.random() * 400);
			this.y = Math.floor(Math.random() * 400);
			this.xSpeed = -2;
			this.ySpeed = 3;
		};


		var circle = function (x, y, radius, fillCircle) {
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2, false);
			if (fillCircle) {
				ctx.fill();
			} 
			else {
				ctx.stroke();
			}
		};

		Ball.prototype.draw = function () {
			circle(this.x, this.y, 3, true);
		};

		Ball.prototype.move = function () {
			this.x += this.xSpeed;
			this.y += this.ySpeed;
		};

		Ball.prototype.checkCollision = function () {
			if (this.x < 0 || this.x > width) {
				this.xSpeed = -this.xSpeed;
			}
			if (this.y < 0 || this.y > height) {
				this.ySpeed = -this.ySpeed;
			}
		};

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

		
                var ball = [];         // сделайте var ball массивом
                for(var i = 0; i < 10; i++){
                         ball[i] = new Ball();	
                }
                var width = canvas.width;
                var height = canvas.height;	
		
		setInterval(function () {
		    ctx.clearRect(0, 0, width, height);
		    for(var i = 0; i < 10; i++){      // цикл вставьте внутрь setInterval(function () {
                        ball[i].draw();
                        ball[i].move();
                        ball[i].checkCollision();
                    } ;
  		    ctx.strokeRect(0, 0, width, height);
		}, 30);
   </script>
  </body>

</html>
Вопрос: Сделать высоту родителя canvas == высоте canvas

Необходимо, что бы родительский элемент, содержащий канвас, был равен размеру канваса - что бы родитель-контейнер никак себя не проявлял себя визуально.

На первый взгляд ничего сложного:
Код

<div style="margin:0; padding:0">
    <canvas style="margin:0; padding:0" width="18px" height="18px"></canvas>
</div>


Доктайп: 
Код

<!DOCTYPE html>


Но не работает :(
Высота элемента, обрамляющего канвас, больше на 2px сверху и снизу. Тоесть, в сумме, по высоте он больше на 4px, чем содержимый канвас.
При том данное правило сохраняется и для ячейки таблицы.

Что я упускаю из виду?
Возможно ли сделать родителя канваса строго совпадающим по размерам с ним?
Ответ:
Необходимо, что бы родительский элемент, содержащий канвас, был равен размеру канваса - что бы родитель-контейнер никак себя не проявлял себя визуально.

На первый взгляд ничего сложного:
Код

<div style="margin:0; padding:0">
    <canvas style="margin:0; padding:0" width="18px" height="18px"></canvas>
</div>


Доктайп: 
Код

<!DOCTYPE html>


Но не работает :(
Высота элемента, обрамляющего канвас, больше на 2px сверху и снизу. Тоесть, в сумме, по высоте он больше на 4px, чем содержимый канвас.
При том данное правило сохраняется и для ячейки таблицы.

Что я упускаю из виду?
Возможно ли сделать родителя канваса строго совпадающим по размерам с ним?
Вопрос: Придать id или class холсту canvas

Здравствуйте.
-при нажатии на кнопку save появляется картинка элемента в виде холста canvas, но canvas создается без id или class- это можно проверить, если посмотреть код элемента. Нужно чтобы холст создавался с id или class, как это сделать?
Ответ:
Сообщение от myautosaler
Придать id или class холсту canvas
за стишок +
Вопрос: Просмотрщик изображений на Canvas

Возможно ли сделать подобное? Пользователь загружает файлы изображений, а потом листает их, используя canvas, как в обычной галерее.
Я понимаю, что это вполне возможно, только как. Можете какие-нибудь основные принципы, методы, статьи на этот счет скинуть или написать?
Только просьба не писать, что есть drawImage() и отсюда надо начинать.
Что-нибудь по делу, если возможно.

Спасибо!
Ответ: А что насчет качества? Ведь если фото снято в 16 Мп например, то его будет проблематично засунуть в canvas без видимой потери качества. Или нет?
Вопрос: canvas toDataURL

Как можно получить gif в base64 я просто пытаюсь сделать вот так
image = canvas.toDataURL('image/gif'); но в итоге получаю обычный
png
Ответ: На клиенте без canvas этого не сделать. Можно на клиенте определить только координаты, передать их на сервер с изображением, а сервер обрежет.
Вопрос: Удаление линии с Canvas

Есть <canvas> элемент и задание сделать рисовалку к нему.

Нужны следущие функции:

- Рисование линий, юзер кликает левой кнопокой мышки по координате на канвасе, программа запоминает ее, юзер передвигает мышку и отпускает левую кнопку, программа рисует линию точка А -> точка Б. (это я разобрался)
- Во время рисования, программа должна отображать временную линию, которая бегает за курсором, типа как в пэинте, как только юзер отпускает кнопку, линия становится постоянной.

Я сделал следущее:

3 ивентлистенера к канвасу (mousedown/mousemove/mouseup)

mousedovn listener
делает следущее:
Код:
1) вычисляет координаты начала линии (работает успешно)
2) сохраняет их в глобальную переменную
3) дает значение переменной а true, переменная нужна обработчику события mousemove
mouseup listener
делает следущее:
Код:
1) вычисляет координаты точки где юзер отпустил кнопку мышки
2) рисует линию
3) значение переменной a ставит обратно false
mousemove listener
содержит большое условие (если а = true) то выполняется весь код, если a = false (ранее не было инициированно рисование линии) то не делает ничего
ну и соответственно тоже рисует линию до текущей позиции указателя от начала

Все работает, но линии вспомогательные конечно же не исчезают
если перед отрисовкой в mousemove добавить context.canvas.width = context.canvas.width, то, разумеется, программа работает как и должно в задании, но дает нарисовать только одну линию

Хотелось бы получить совет как исправить ситуацию, не готовый код, а просто совет в каком направлении думать
Ответ: проблема решилась созданием двух канвасов, наложенных друг на друга - один для интерфейса (вспомогательная линия), второй - для рисунка
Вопрос: CANVAS получить позицию точки рисования

В канвас возможно как то получить координаты точки рисования?

- вот тут рисуется окружность и после остановки рисования мне необходимо получить от canvas позицию где рисование закончилось.

Ответ: синус и косинус )