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