Управление рисованием на холсте в окне из другого окна (с помощью ползунков) ⇐ Html

[Anonymous]

У меня простое окно с холстом вверху и ползунками внизу.
Ползунки регулируют то, что рисуется на холсте.
Поскольку у меня есть несколько ползунков, мне приходится постоянно прокручивать вниз, чтобы использовать ползунки, и снова прокручивать вверх, чтобы увидеть результат на холсте.
Можно ли разместить элементы управления (ползунки) в первом окне и иметь другое окно только с холстом, второе окно управляется из первого окна?
См. текущий код одного окна ниже:
В фрагменте стека:


var TAU = 2 * Math.PI;
var DEGTORAD = TAU / 360.0;

function update() {
var canvas = document.getElementById('canvas');
var ctx_main = canvas.getContext('2d');
var w = parseFloat(canvas.width);
var h = parseFloat(canvas.height);
var R1 = parseFloat(document.getElementById('R1_id').value);
var R2 = parseFloat(document.getElementById('R2_id').value);

canvas.width = canvas.width;
ctx_main.lineWidth = 1;

var X0 = w / 2;
var Y0 = h / 2;
document.getElementById('start_angle_value').innerHTML = document.getElementById('start_angle_id').value;
document.getElementById('end_angle_value').innerHTML = document.getElementById('end_angle_id').value;
document.getElementById('angle_inc_value').innerHTML = document.getElementById('angle_inc_id').value;
document.getElementById('rho_value').innerHTML = document.getElementById('rho_id').value;
document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
var R1 = document.getElementById('R1_id').value;
var R2 = document.getElementById('R2_id').value;
var rho = document.getElementById('rho_id').value;
var start_angle = document.getElementById('start_angle_id').value;
var end_angle = document.getElementById('end_angle_id').value;
var angle_inc = document.getElementById('angle_inc_id').value;
do_spirograph_one_run(ctx_main, parseFloat(R1), parseFloat(R2), parseFloat(X0), parseFloat(Y0), start_angle, end_angle, angle_inc, parseFloat(rho), "red");
} // end of update() function
// end of update() function

function init() {
document.getElementById('R1_id').oninput = update;
document.getElementById('R2_id').oninput = update;
document.getElementById('start_angle_id').oninput = update;
document.getElementById('end_angle_id').oninput = update;
document.getElementById('angle_inc_id').oninput = update;
document.getElementById('rho_id').oninput = update;
update();
} // end of init() function
// end of init() function

window.onload = init;

function draw_line(ctx_main, x_from, y_from, x_to, y_to, line_width, line_color) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.moveTo(x_from, y_from);
ctx_main.lineTo(x_to, y_to);
ctx_main.stroke();
ctx_main.closePath();
} // end of draw_line(6) function
// end of draw_line(6) function

function draw_circle(ctx_main, x, y, r, angle_from, angle_to, line_width, line_color, cw_ccw, fill) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.arc(x, y, r, angle_from, angle_to, cw_ccw);
ctx_main.stroke();
if (fill != null)
ctx_main.fill();
ctx_main.closePath();
} // end of draw_circle(7) function
// end of draw_circle(7) function

function do_spirograph_one_run(ctx_main, R0, R1, X0, Y0, start_angle, end_angle, angle_inc, rho, current_color) {
var line_width = ctx_main.lineWidth;
var line_color = ctx_main.strokeStyle;
if (document.getElementById("spirograph_show_circles").checked) {
draw_circle(ctx_main, X0, Y0, R0, 0, TAU, 1, "red", null, null); // draw R0
draw_circle(ctx_main, X0 + R0 - R1, Y0, R1, 0, TAU, 1, "green", null, null); // draw R1
draw_circle(ctx_main, X0 + R0 - R1 + rho, Y0, 3, 0, TAU, 5, "blue", null, null); // draw rotating point at starting position
ctx_main.lineWidth = line_width;
}
for (var angle = DEGTORAD * start_angle; angle < DEGTORAD * end_angle; angle += DEGTORAD * angle_inc) {
draw_line(ctx_main, X0 + (R0 - R1) * Math.cos(angle) + rho * Math.cos((R0 - R1) / R1 * angle),
Y0 + (R0 - R1) * Math.sin(angle) - rho * Math.sin((R0 - R1) / R1 * angle),
X0 + (R0 - R1) * Math.cos(angle + DEGTORAD * angle_inc) + rho * Math.cos((R0 - R1) / R1 * (angle + DEGTORAD * angle_inc)),
Y0 + (R0 - R1) * Math.sin(angle + DEGTORAD * angle_inc) - rho * Math.sin((R0 - R1) / R1 * (angle + DEGTORAD * angle_inc)),
ctx_main.lineWidth, current_color, 0, 0, "", "", 0, 0, "", "");
} /* end of radius loop */
} // end of do_spirograph_one_run(11) function
// end of do_spirograph_one_run(11) function

document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
input[type=range] {
width: 800px;
}




 Show Original Circles



Start Angle


End Angle


Angle Inc


Rho


R1


R2





Исходный HTML:




Circle

input[type=range] { width:800px; }


var TAU = 2*Math.PI;
var DEGTORAD = TAU / 360.0;

function update() {
var canvas = document.getElementById('canvas');
var ctx_main = canvas.getContext('2d');
var w = parseFloat(canvas.width);
var h = parseFloat(canvas.height);
var R1 = parseFloat(document.getElementById('R1_id').value);
var R2 = parseFloat(document.getElementById('R2_id').value);

canvas.width = canvas.width;
ctx_main.lineWidth = 1;

var X0 = w / 2;
var Y0 = h / 2;
document.getElementById('start_angle_value').innerHTML = document.getElementById('start_angle_id').value;
document.getElementById('end_angle_value').innerHTML = document.getElementById('end_angle_id').value;
document.getElementById('angle_inc_value').innerHTML = document.getElementById('angle_inc_id').value;
document.getElementById('rho_value').innerHTML = document.getElementById('rho_id').value;
document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;
var R1 = document.getElementById('R1_id').value;
var R2 = document.getElementById('R2_id').value;
var rho = document.getElementById('rho_id').value;
var start_angle = document.getElementById('start_angle_id').value;
var end_angle = document.getElementById('end_angle_id').value;
var angle_inc = document.getElementById('angle_inc_id').value;
do_spirograph_one_run(ctx_main, parseFloat(R1), parseFloat(R2), parseFloat(X0), parseFloat(Y0), start_angle, end_angle, angle_inc, parseFloat(rho), "red");
} // end of update() function
// end of update() function

function init() {
document.getElementById('R1_id').oninput = update;
document.getElementById('R2_id').oninput = update;
document.getElementById('start_angle_id').oninput = update;
document.getElementById('end_angle_id').oninput = update;
document.getElementById('angle_inc_id').oninput = update;
document.getElementById('rho_id').oninput = update;
update();
} // end of init() function
// end of init() function

window.onload = init;

function draw_line(ctx_main, x_from, y_from, x_to, y_to, line_width, line_color) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.moveTo(x_from, y_from);
ctx_main.lineTo(x_to, y_to);
ctx_main.stroke();
ctx_main.closePath();
} // end of draw_line(6) function
// end of draw_line(6) function

function draw_circle(ctx_main, x, y, r, angle_from, angle_to, line_width, line_color, cw_ccw, fill) {
ctx_main.lineWidth = line_width;
ctx_main.strokeStyle = line_color;
ctx_main.beginPath();
ctx_main.arc(x, y, r, angle_from, angle_to, cw_ccw);
ctx_main.stroke();
if (fill != null)
ctx_main.fill();
ctx_main.closePath();
} // end of draw_circle(7) function
// end of draw_circle(7) function

function do_spirograph_one_run(ctx_main, R0, R1, X0, Y0, start_angle, end_angle, angle_inc, rho, current_color) {
var line_width = ctx_main.lineWidth;
var line_color = ctx_main.strokeStyle;
if (document.getElementById("spirograph_show_circles").checked) {
draw_circle(ctx_main, X0 , Y0, R0, 0, TAU, 1, "red", null, null); // draw R0
draw_circle(ctx_main, X0 + R0 - R1 , Y0, R1, 0, TAU, 1, "green", null, null); // draw R1
draw_circle(ctx_main, X0 + R0 - R1 + rho, Y0, 3, 0, TAU, 5, "blue", null, null); // draw rotating point at starting position
ctx_main.lineWidth = line_width;
}
for (var angle = DEGTORAD * start_angle; angle < DEGTORAD * end_angle; angle += DEGTORAD * angle_inc)
{
draw_line(ctx_main, X0 + (R0 - R1) * Math.cos(angle) + rho * Math.cos((R0 - R1)/R1 * angle),
Y0 + (R0 - R1) * Math.sin(angle) - rho * Math.sin((R0 - R1)/R1 * angle),
X0 + (R0 - R1) * Math.cos(angle + DEGTORAD * angle_inc) + rho * Math.cos((R0 - R1)/R1 * (angle + DEGTORAD * angle_inc)),
Y0 + (R0 - R1) * Math.sin(angle + DEGTORAD * angle_inc) - rho * Math.sin((R0 - R1)/R1 * (angle + DEGTORAD * angle_inc)),
ctx_main.lineWidth, current_color, 0, 0, "", "", 0, 0, "", "");
} /* end of radius loop */
} // end of do_spirograph_one_run(11) function
// end of do_spirograph_one_run(11) function








 Show Original Circles


Start Angle
End Angle
Angle Inc
Rho
R1
R2


document.getElementById('R1_value').innerHTML = document.getElementById('R1_id').value;
document.getElementById('R2_value').innerHTML = document.getElementById('R2_id').value;





Подробнее здесь: https://stackoverflow.com/questions/798 ... th-sliders