Форум

lekba · #1 (**permalink**) 26.05.2013, 14:04

подскажите, можно ли скопировать "уже нарисованный" канвас 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>

dmitriymar · #2 (**permalink**) 26.05.2013, 14:56

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

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

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

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

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

можно

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

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

можно.

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

vadim5june · #3 (**permalink**) 26.05.2013, 17:38

<!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>

Форум

Справочник

Discord чат

Курсы javascript