Javascript.RU

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

Угловой градиент на canvas
Писал для себя скриптик, который с помощью канваса создает анимашку процесса загрузки. Получилось всё кроме создания углового градиента - сколько ни искал - везде только линейные и радиальные, а как делать угловые - . Страничка с тестом скрипта ниже, на ней показано и то что получается, и то что должно получится. Очень прошу помочь.

<html>
<head>
</head>
<body>
<!-- как должно быть -->
<img src='http://studioad.ru/iload/wait.gif'/>

<br>

<!-- ну и как получается.. -->
<script>
function canvasLoader(radius,width,speed,color){
	var loader = document.createElement('canvas'),
	ctx = loader.getContext("2d")
	ctx.width=radius*2;
	ctx.height=radius*2;
	ctx.translate(radius,radius)
function anim(){
var lingrad = ctx.createLinearGradient(0,0,0,radius);
  lingrad.addColorStop(0, color);
  lingrad.addColorStop(1, 'white');
  	ctx.rotate(0.1);
	ctx.clearRect(-radius,-radius,radius*2,radius*2);
	ctx.beginPath();   
	ctx.lineWidth = width;  
	ctx.strokeStyle = lingrad;  
	ctx.arc(0,0,radius-width/2,0,Math.PI*2,true);  
	ctx.stroke();
	}
setInterval(anim,speed);	
	return loader;
	}
document.body.appendChild(canvasLoader(10,2,20,'#aaaaaa'))
</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2010, 13:07
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

Как вариант: наклонить линейный градиент и отрисовать его в левой верхней четверти.
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2010, 17:55
Аватар для Aleko
Аспирант
Отправить личное сообщение для Aleko Посмотреть профиль Найти все сообщения от Aleko
 
Регистрация: 28.04.2010
Сообщений: 42

B@rmaley.e><e, сам об этом думал, только немного не так - 2 линейных зеркальных градиента 200% высоты и 50% ширины. Но всё же хочется по уму сделать. Не может быть что нельзя было сделать угловой градиент.
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2010, 02:34
Аватар для Aleko
Аспирант
Отправить личное сообщение для Aleko Посмотреть профиль Найти все сообщения от Aleko
 
Регистрация: 28.04.2010
Сообщений: 42

Тема ап =(
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Canvas масштабирование изображения+рисование zeddead Общие вопросы Javascript 2 23.10.2011 17:51
Онлайн фотошоп на canvas mycoding Общие вопросы Javascript 5 17.04.2010 22:02
Canvas (разный цвет линий) neurostep Общие вопросы Javascript 2 26.10.2009 16:23
Как эта canvas влияет на https? demi Общие вопросы Javascript 4 28.08.2009 15:15
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05