Javascript-форум - Как скопировать canvas и объединить все в один новый

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как скопировать canvas и объединить все в один новый (https://javascript.ru/forum/dom-window/38285-kak-skopirovat-canvas-i-obedinit-vse-v-odin-novyjj.html)

Как скопировать canvas и объединить все в один новый

подскажите, можно ли скопировать "уже нарисованный" канвас 18 раз,
повернуть каждый раз на +10 градусов,
и объединить все полученные таким способом канвасы в один новый?

тот же самый вопрос, простым языком, у меня есть два луча от солнышка, хотел бы из них сделать солнышко целиком, путем поворота луча относительно центра

Код:

<!doctype html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

body{text-align: center;}

</style>

</head>

<body>

<canvas id="sun" height="500" width="500">the sun</canvas>

<script>

var canvas = document.getElementById('sun');

var context = canvas.getContext('2d');



context.beginPath();

context.moveTo(canvas.width/2-15, 0);

context.lineTo(canvas.width/2+15, 0);

context.lineTo(canvas.width/2-15, canvas.height);

context.lineTo(canvas.width/2+15, canvas.height);



context.fillStyle = "#ff8000";

context.closePath();



context.fill();



</script>

</body>

</html>

Цитата:

Сообщение от lekba

подскажите, можно ли скопировать "уже нарисованный" канвас 18 раз,

можно. только смысл 18? достаточно 1 го.

Цитата:

Сообщение от lekba

повернуть каждый раз на +10 градусов,

можно

Цитата:

Сообщение от lekba

и объединить все полученные таким способом канвасы в один новый?

можно.

Как?- Ответы в любом мане по работе с канвой.
Как их найти? - Гугл

<!doctype html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
body{text-align: center;}
</style>
</head>
<body>
<canvas id="sun" height="500" width="500" 
style='border:1px solid black;'>the sun</canvas>
<script>
var canvas = document.getElementById('sun');
var context = canvas.getContext('2d');
var i=0;
function ff()
{context.save();
context.translate(canvas.width/2,canvas.height/2);
context.rotate(.3*i);
f();i++;
context.restore();
};
function f(){
context.clearRect(0,0,canvas.width,canvas.height);
//alert(2);
context.beginPath();
context.moveTo(-15, canvas.height/2);
context.lineTo(15, canvas.height/2);
context.lineTo(-15, -canvas.height/2);
context.lineTo(15, -canvas.height/2);

context.fillStyle = "#ff8000";
context.closePath();
context.fill();
};
setInterval(ff,50);
</script>
</body>
</html>