Код с несколькими объектами на 1 холсте (переработанный скрипт, взятый с этого форума)
<!doctype html>
<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>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<div>
<canvas id="canvas" width="400" height="300" class="unselectable">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.width = 1020;
canvas.height = 700;
var ctx = canvas.getContext("2d");
var curid=0;
var RECTS = 5;
var DoorWidth = 150;//ширина двери
var DoorHeight = 410;//высота двери
var otstup_y = 100;
var pic_door = new Image(); // "Создаём" изображение
pic_door.src = '1.jpg'; // Источник изображения
pic_door.onload = function(){ // Событие onLoad, ждём момента загрузки изображения
ctx.drawImage(pic_door, 0, 0, DoorWidth, DoorHeight);// Рисуем
}
function init() {
return setInterval(draw, 10);
}
function draw() {
//ctx.fillStyle = "red";
ctx.fillStyle = ctx.createPattern(pic_door,"repeat");
ctx.clearRect(0, 0, rect[0].WIDTH, rect[0].HEIGHT);
for(i=0;i<RECTS;i++){
ctx.beginPath();
ctx.rect(rect[i].x,rect[i].y,rect[i].dx,rect[i].dy);
ctx.closePath();
ctx.fillRect(rect[i].x,rect[i].y,rect[i].dx,rect[i].dy);
ctx.lineWidth = 5;
ctx.strokeStyle = "#00ff00";
ctx.stroke();
//texture_door();
}
}
function texture_door() {
var pat=ctx.createPattern(pic_door,"repeat");
ctx.fillStyle=pat;
ctx.lineWidth = "100";
for(i=0;i<RECTS;i++){
ctx.beginPath();
ctx.rect(rect[i].x,rect[i].y,rect[i].dx,rect[i].dy);
ctx.closePath();
ctx.fillRect(rect[i].x,rect[i].y,rect[i].dx,rect[i].dy);
//ctx.stroke();
}
}
function Box(ctx_, id_)
{
this.ctx = ctx_;
this.x = 75;
this.y = 50;
this.dx = DoorWidth;
this.dy = DoorHeight;
this.WIDTH = 1020;
this.HEIGHT = 700;
this.id = id_;
this.dragok = false;
}
Box.prototype.create = function(x,y) {
this.x = x;
this.y = y;
this.ctx.beginPath();
this.ctx.rect(x,y,this.dx,this.dy);
this.ctx.closePath();
this.ctx.fill();
}
Box.prototype.cleare = function() {
this.ctx.clearRect(this.x, this.y, this.dx, this.dy);
}
Box.prototype.getX = function() {
return (this.x + canvas.offsetLeft);
}
Box.prototype.getY = function() {
return (this.y + canvas.offsetTop);
}
Box.prototype.isFocus = function(mX,mY) {
if(mX>this.getX() && mY>this.getY() && mX<(this.getX() + this.dx) && mY<(this.getY() + this.dy))
return true;
else
return false;
}
function myMove(e){
if (rect[curid].dragok){
rect[curid].x = e.pageX - canvas.offsetLeft-rect[curid].dx/2;
rect[curid].y = otstup_y;
if (rect[curid].x>canvas.width-DoorWidth*2){
rect[curid].x=canvas.width-DoorWidth*2;
}
if (rect[curid].x<otstup_y){
rect[curid].x=otstup_y;
}
}
}
function myUp(){
rect[curid].dragok = false;
curid = 0;
canvas.onmousemove = null;
}
function Move(mX, mY){
for(p in rect)
{
if(rect[p].isFocus(mX,mY))
{
rect[p].dragok = true;
curid=p;
canvas.onmousemove = myMove;
}
}
}
function Down(event)
{
Move(event.pageX,event.pageY);
}
var rect = new Array(RECTS);
for(var i=0; i<RECTS; i++)
{
rect[i] = new Box(ctx,i);
rect[i].create(100+i*(DoorWidth+5), otstup_y);
}
init();
canvas.onmouseup = myUp;
canvas.onmousedown = Down;
</script>
</body>
</html>