Здравствуйте! При нажатии на кнопку требуется, чтобы создавался новый динамический объект canvas (для выбора цвета в графическом редакторе). Он должен создаваться поверх нижней канвы (предназначена, собственно, для рисования на ней). Привожу код, но он работает не корректно - динамический канвас не создается. Помогите, пожалуйста, исправить ошибку. Так же, при щелчке по нижней канве динамический объект должен исчезнуть. Подскажите, как это можно реализовать? Заранее спасибо. | Код |
//инициализация канвы, на которой происходит рисование
<canvas id="canvas"></canvas>
<script type="text/javascript">
Canva.init('canvas', 1000, 270);
</script>
<form>
<input type="button" value="Foreground" name="ForegroundTool" onclick="Palette()">
</form>
|
| Код |
/***********************************************************************
* канва, на которой происходит рисование *
**********************************************************************/
var Canva = {};
Canva.init = function(id, width, height)
{
var canv = document.getElementById(id);
this.selectedForegroundColor = 'white';
canv.width = width;
canv.height = height;
this.canvasId = id;
this.ctx = canv.getContext("2d");
this.selectedColor = '#000000';
this.selectedFillColor = '#FFFFFF';
this.selectedWidth = 1;
this.selectedOpacity = 1;
this.tool = Pencil;
this.drawing = false;
canv.onmousedown = function(e)
{
var evnt = ie_event(e);
Canva.tool.start(evnt);
};
canv.onmouseup = function(e)
{
if (Canva.drawing)
{
var evnt = ie_event(e);
Canva.tool.finish(evnt);
}
};
canv.onmousemove = function(e)
{
if (Canva.drawing)
{
var evnt = ie_event(e);
Canva.tool.move(evnt);
}
document.getElementById(Canva.canvasId).style.cursor = 'crosshair';
};
};
/**********************************************************************
* Palette здесь должен создаться динамический канвас, а на нем появиться круг, залитый градиентом *
*********************************************************************/
function Palette()
{
var offsetx, offsety, radius = 90,
count = 1080, oneDivCount = 1/count, countDiv360 = count/360, degreesToRadians = Math.PI/180,
i, angle, angle_cos, angle_sin;
var canvas = document.createElement("canvas"); //создаю динамический элемент
canvas.width = 250;
canvas.height = 250;
offsetx = canvas.width / 2;
offsety = canvas.height / 2;
var context = canvas.getContext("2d");
context.lineWidth = 1;
for(i = 0; i < count; i++)
{
angle = i / countDiv360 * degreesToRadians;
angle_cos = Math.cos(angle);
angle_sin = Math.sin(angle);
context.strokeStyle = "hsl(" + Math.floor( (i * oneDivCount) * 360 ) + ", 100%, 50%)";
context.beginPath();
context.moveTo(angle_cos + offsetx, angle_sin + offsety);
context.lineTo(angle_cos * radius + offsetx, angle_sin * radius + offsety);
context.stroke();
}
var gradient = context.createRadialGradient(offsetx, offsetx, 0, offsetx, offsetx, radius);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
appendChild(canvas); //??????? скорее всего ошибка связана с этим
return canvas;
}
|
|
[JS] Динамическое создание элемента canvas 
Загрузка ...
