Форум

IVAAAAN · #1 (**permalink**) 26.06.2014, 23:20

практикуюсь писать хороший код на 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>

рони · #2 (**permalink**) 27.06.2014, 00:19

IVAAAAN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
    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.lineWidth = this.size;
		this.ctx.lineCap = 'round';
        this.ctx.clearRect(0, 0, 700, 500);
		switch(tool){
			case 'pen':
                this.ctx.beginPath();
				this.ctx.moveTo(this.x1, this.y1);
                this.ctx.lineTo(this.x, this.y);
                this.ctx.stroke();
				break;
		}

	}
}

draw.init();

	draw.canvas.addEventListener('mousedown', function(e){
		draw.startDraw = true;
        draw.x1 = e.pageX - draw.canvas.offsetLeft; //Координата X
		draw.y1 = e.pageY - draw.canvas.offsetTop; //Координата Y

	}, 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);

</script>
</body>

</html>

рони · #3 (**permalink**) 27.06.2014, 00:37

IVAAAAN,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
    var draw = {

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

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

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


draw.drawing = function(tool){
var x1=(Math.PI/180)*0;
var x2=(Math.PI/180)*360;

	if(this.startDraw){
		this.ctx.strokeStyle = '#66FF00';
        this.ctx.fillStyle =  '#66FF00';
		this.ctx.lineWidth = this.size;
		this.ctx.lineCap = 'round';
    		switch(tool){
			case 'pen':
                this.ctx.beginPath();
                this.ctx.arc(this.x, this.y, 15, x1, x2)
                this.ctx.fill();
                this.ctx.stroke();
				break;
		}

	}
}

draw.init();

	draw.canvas.addEventListener('mousedown', function(e){
		draw.startDraw = true;
	}, 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);

</script>
</body>

</html>

IVAAAAN · #4 (**permalink**) 27.06.2014, 08:10

спасибо

Форум

Справочник

Discord чат

Курсы javascript