gpt4 book ai didi

javascript - 在圆上做旋转渐变?

转载 作者:可可西里 更新时间:2023-11-01 13:13:21 25 4
gpt4 key购买 nike

我试图在一个圆上获得一个旋转渐变来跟随这个模型。 rotating gradient following line

我已经模拟了我在 a JSFiddle 中尝试做的事情.

为了您的方便,这里是代码:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 75;
var startAngle = 0// 1.1 * Math.PI;
var endAngle = 2.0 * Math.PI;//1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
var gradient = context.createLinearGradient(radius, radius, 0, 0);
gradient.addColorStop(0, '#3b749a');
gradient.addColorStop(1, '#FFFFFF');
context.lineWidth = 15;

context.arc(radius, radius, radius, startAngle, endAngle, counterClockwise);

context.strokeStyle = gradient;
context.stroke(gradient);

现在这是我的挑战。无论我尝试什么,我似乎都无法让渐变跟随路径。它似乎可以从任何它想要的 Angular 应用,而不是遵循路径。我做错了什么?

其次,是否可以像模型一样,在一个边上做一个圆 Angular ?

不完美解决方案的后续问题:

所以看起来没有办法用渐变描边路径,只能将渐变应用到路径“切出”的 Canvas 上。 (而且 HTML5 中没有“圆形”渐变 AFAIK。)

由于建议的解决方案需要绘制两个元素,因此旋转/动画化的最佳方式是什么?对于一个对象/上下文,我似乎可以捕获它,进行变换和旋转。有了两个,我是否需要渲染到图像对象并旋转?

最佳答案

这实际上不是那么微不足道。也许有更简单的方法来做到这一点,我只是采取了艰难的方法。或者这可能是新事物。

我所做的是最终在圆圈内绘制了一个渐变框。在一个间隔上,圆改变它的起点和终点,这样间隙就会旋转。当发生这种情况时,我重新计算渐变框以适应新的间隙,然后在那里绘制它。结果是一个不错的效果。

在此演示中,我将其设置为随机循环显示不同的颜色和不同的尺寸,以展示不同的旋转器的外观并获得一些乐趣。

jsFiddle Demo

操作的核心在这个函数中:

function showSpinner(
startAngle,endAngle,direction,radius,line,context,color,shadow)
{
context.beginPath();
var a = startAngle / Math.PI;
a = a % 2;
a = 2 - a;
a *= Math.PI;
var x = radius + Math.cos(a)*radius*1.7;
var y = radius - Math.sin(a)*radius*1.7;
var gradient = context.createLinearGradient(radius,radius,x,y);
gradient.addColorStop(0.05, color);
gradient.addColorStop(.60, '#FFFFFF');
context.lineWidth = line;
context.lineCap = "round";
context.shadowBlur = 10;
if( shadow === true )context.shadowColor = '#727272';
context.arc(radius, radius, radius-line, startAngle, endAngle, direction);
context.strokeStyle = gradient;
context.stroke();
}

这个函数利用上面的绘图函数来提供动画

function spinner(obj){
var radius,line,color,shadow;
if( obj && obj.hasOwnProperty("shadow") ){
shadow = true;
}else{ radius = 75; }
if( obj && obj.hasOwnProperty("radius") ){
radius = obj.radius;
}else{ radius = 75; }
if( obj && obj.hasOwnProperty("line") ){
line = obj.line;
}else{ line = 7; }
var speed = {inc:0.04,loop:15};
if( obj && obj.hasOwnProperty("speed") ){
if( obj.speed == "slow" ){
speed = {inc:0.02,loop:25};
}
}
if( obj && obj.hasOwnProperty("color") ){
color = obj.color;
}else{ color = '#3b749a'; }
var canvas = document.getElementById('myCanvas');
canvas.style.height = 2*(radius+line) + "px";
canvas.style.width = 4*(radius+line) + "px";
var context = canvas.getContext('2d');
var startAngle,endAngle;
var counterClockwise = false;
var sa = 1.2;
var ea = 0.85;

var spinner = setInterval(function(){
canvas.width = canvas.width;
sa += speed.inc;
ea += speed.inc;
startAngle = sa * Math.PI;
endAngle = ea * Math.PI;
showSpinner(
startAngle,
endAngle,
counterClockwise,
radius,
line,
context,
color,
shadow
);
},speed.loop);
setTimeout(function(){ clearInterval(spinner);},15000);
return spinner;
}

但是要使用它,您真正需要做的就是

spinner()

如果你愿意,可以传入一个参数。您的选项是半径、线、颜色、阴影和速度。

var obj = {};
obj.line = int - the size in pixels of the line width
obj.radius = int - the radius of the circle drawn (currently maxed at 75 for viewing, but you can always change the size of the canvas if you want)
obj.color = string - the color that the line of the spinner will be
obj.shadow = bool - show the shadow or don't show it
obj.speed = string - Only supports "slow" right now. Otherwise it will be fast

关于javascript - 在圆上做旋转渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15899982/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com