Показать сообщение отдельно
  #1 (permalink)  
Старый 26.06.2014, 23:20
Аспирант
Отправить личное сообщение для IVAAAAN Посмотреть профиль Найти все сообщения от IVAAAAN
 
Регистрация: 04.07.2013
Сообщений: 47

Рисовалка на canvas, ошибки
практикуюсь писать хороший код на js, но не получается
что-то не работает, а что - не пойму:
var draw = {

	tool:'pen', // Инструмент

	size:'5',  // Толщина
}

draw.init = function(){ //Иницилизация канвас
	this.canvas = document.getElementById('canvas');
	this.ctx = this.canvas.getContext('2d');
};


draw.drawing = function(tool){
	if(this.startDraw){
		this.ctx.strokeStyle = '#000';
		this.ctx.moveTo( this.x, this.y);

		this.canvas.lineWidth = this.size;
		this.canvas.lineCap = 'round';
		switch(tool){
			case 'pen':
				this.ctx.lineTo(this.x, this.y);
				this.ctx.moveTo(this.x, this.y);
				this.ctx.stroke();

				break;
		}

	}
}


Как я это использую:
draw.init();

	draw.canvas.addEventListener('mousedown', function(){
		draw.startDraw = true;
		draw.ctx.beginPath();

	}, false);
	draw.canvas.addEventListener('mousemove', function(e){
		draw.x = e.pageX - draw.canvas.offsetLeft; //Координата X
		draw.y = e.pageY - draw.canvas.offsetTop; //Координата Y
		draw.drawing('pen');

	}, false);

	draw.canvas.addEventListener('mouseup', function(){
		draw.startDraw = false;
	}, false);



<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
Ответить с цитированием