Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2013, 14:04
Интересующийся
Отправить личное сообщение для lekba Посмотреть профиль Найти все сообщения от lekba
 
Регистрация: 26.05.2013
Сообщений: 22

Как скопировать 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>
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2013, 14:56
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

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

Как?- Ответы в любом мане по работе с канвой.
Как их найти? - Гугл
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2013, 17:38
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как "достать" все объекты документа macdack Общие вопросы Javascript 39 13.10.2012 23:47
Как получить все атрибуты <input> Kotakota jQuery 7 08.10.2012 18:22
Как обновить один Div OklickSpb Общие вопросы Javascript 9 08.03.2012 16:43
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37