Рисовалка на 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> |
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>
|
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>
|
спасибо
|
| Часовой пояс GMT +3, время: 15:37. |