Здравствуйте, Уважаемые форумчане!
Хочу реализовать на canvas передвижение нескольких графических объектов, также должна быть представлена возможность изменения текстур у этих объектов.
Данные графические объекты должны создаваться динамически.
Т.е. при заходе пользователя на сайт он выбирает количество этих объектов и уже работает с ними.
Вопрос, как лучше это сделать - прорисовывать по умолчанию на одном холсте эти объекты или создавать дополнительные canvas-ы для каждого объекта?.
Т.е. дополнительный канвас отвечает за новый объект.
Код с одним объектом ниже
<html>
<head>
<style>
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
canvas{
border: 1px solid black;
background-color:#cccccc;
}
</style>
<script>
var ctx;
var DoorWidth = 150;//ширина двери
var DoorHeight = 410;//высота двери
var pic_door = new Image(); // "Создаём" изображение
pic_door.src = '1.jpg'; // Источник изображения
pic_door.onload = function(){ // Событие onLoad, ждём момента загрузки изображения
ctx.drawImage(pic_door, 0, 0, DoorWidth, DoorHeight);// Рисуем
}
var canvas;
var dataURL;
var koef_y=40;
var koef_x=30;
var setTransform_x=100;
var setTransform_y=100;
var curid=0;
var RECTS = 10;
var dragok = false; // переменная истинная когда зажата кнопка мыши
var x=0;//глобвльное объявление координат при перемещении обьекта
var y=0;//глобвльное объявление
function init(){
canvas = document.getElementById('doors');
if (canvas.getContext){
canvas.width = 1020;
canvas.height = 700;
ctx = canvas.getContext('2d');
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
return setInterval(draw, 10);
}
}
function clear(){
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height); //очищаем холст
}
function text_for_test(){
ctx.setTransform(1, 0, 0, 1, setTransform_x, -setTransform_y);
ctx.font = "12px Arial";
ctx.textBaseline = "Top";
ctx.fillStyle = "black";
ctx.fillText("setTransform_x*2 "+setTransform_x*2+" м", 20, 170);
ctx.fillText("Координата Х "+x, 20, 190);
ctx.fillText("Координата Y "+y, 20, 210);
ctx.fillText("canvas.width "+canvas.width, 20, 130);
ctx.fillText("canvas.height "+canvas.height, 20, 150);
}
function text_nad_doors(){
ctx.setTransform(1, 0, 0, 1, setTransform_x+x, setTransform_y);
ctx.beginPath();
ctx.moveTo(0,10);
ctx.lineTo(0,koef_y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,koef_y/2);
ctx.lineTo(DoorWidth,koef_y/2);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(DoorWidth,10);
ctx.lineTo(DoorWidth,koef_y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.font = "20px Arial";
ctx.textBaseline = "Top";
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.fillText(DoorWidth+'0', DoorWidth/2, 10, DoorWidth);
}
function text_height_doors(){
ctx.setTransform(1, 0, 0, 1, setTransform_x, setTransform_y);
ctx.beginPath();
ctx.moveTo(0,koef_y);
ctx.lineTo(-koef_x,koef_y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-koef_x/2,koef_y);
ctx.lineTo(-koef_x/2, DoorHeight+koef_y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-koef_x,DoorHeight+koef_y);
ctx.lineTo(0,DoorHeight+koef_y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.rotate(-Math.PI / 2); // поворот на 45 градусов
ctx.font = "20px Arial";
ctx.textBaseline = "Top";
ctx.textAlign = "center";
ctx.fillStyle = "black";
ctx.fillText(DoorHeight+'0', -(DoorHeight)/2-koef_y, -25);
ctx.rotate(Math.PI / 2); // поворот на 45 градусов
}
function draw_door(){
ctx.setTransform(1, 0, 0, 1, setTransform_x+x, setTransform_y+koef_y);
ctx.fillStyle = "red";
ctx.fillRect(0,0,DoorWidth,DoorHeight);
texture_door();
}
function texture_door() {
var pat=ctx.createPattern(pic_door,"repeat");
ctx.fillStyle=pat;
ctx.lineWidth = "100";
ctx.beginPath();
ctx.fillRect(0+5,0+5,DoorWidth-10,DoorHeight-15);
ctx.closePath();
ctx.stroke();
}
function canvas_to_png(){
dataURL = canvas.toDataURL();
document.getElementById('canvasImg').src = dataURL;
}
function myMove(e){
if (dragok)
x = e.pageX - setTransform_x-DoorWidth/2;
}
function myDown(e){
x = e.pageX - canvas.offsetLeft-DoorWidth/2-setTransform_x;
dragok = true;
canvas.onmousemove = myMove;
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
function draw(){
clear();
//setka();
text_nad_doors();
text_height_doors();
draw_door();
text_for_test();
canvas_to_png();
}
</script>
<title>Двери купе</title>
</head>
<body onLoad="init();">
<div class="unselectable"><canvas id='doors'>Обновите браузер</canvas></div>
</body>
</html>