绘制弧线将线性渐变html5画布(Draw arc will linear gradient html5 canvas)

I have a circular arc drawn in canvas is it possible to give it linear gradient with three colors??

原文：https://stackoverflow.com/questions/14193956

更新时间：2019-12-30 17:40

最满意答案

是的，这是可能的！ Javascript中有一个名为createLinearGradient的方法，它将画布上下文作为源，并应用由sx ， sy ， dx ， dy坐标定义的渐变。 前两个选项定义起始坐标，最后两个定义结束坐标。

var gradient = context.createLinearGradient(sx, sy, dx, dy);

调用此方法后，您可以通过调用colorStop方法将渐变颜色应用于画布：

gradient.addColorStop(0, '#f00'); // red

gradient.addColorStop(0.5, '#ff0'); // yellow

gradient.addColorStop(1, '#00f'); // blue

这些是在画布上实现渐变的基本要素。 然后，如果您需要圆形渐变，下一步将是计算圆形颜色渐变位置。 这可以通过以下公式来满足：

var applyAngle = function (point, angle, distance) {

return {

x : point.x + (Math.cos(angle) * distance),

y : point.y + (Math.sin(angle) * distance)

};

};

然后将生成的x和y位置插入到createLinearGradient方法中，这将创建一个漂亮的圆形渐变。 当然，您需要使用arc方法使其成为圆形。

Yes, it's possible! There is a method in Javascript, named createLinearGradient which gets as source the canvas context and applies a gradient defined by sx, sy, dx, dy coordinates. The first two options defines the starting coordinates and last two the ending coordinates.

var gradient = context.createLinearGradient(sx, sy, dx, dy);

After invoking this method you can apply gradient colors to your canvas by calling the colorStop method:

gradient.addColorStop(0, '#f00'); // red

gradient.addColorStop(0.5, '#ff0'); // yellow

gradient.addColorStop(1, '#00f'); // blue

These are the base ingredients for implementing a gradient on a canvas. Then, the next step would be to calculate the circular color gradient positions if you need a circular gradient. This can be satisfied by the following formula:

var applyAngle = function (point, angle, distance) {

return {

x : point.x + (Math.cos(angle) * distance),

y : point.y + (Math.sin(angle) * distance)

};

};

Then plugin the resulted x and y position into the createLinearGradient method, which would create a nice looking circular gradient. Of course you need to use the arc method to make it circular.

相关问答

嘿我从这里偷走了这个： 在Android中用SweepGradient画一个圆弧 但它工作正常，我用的是LinearGradient。 Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, Color.RED, Color.WHITE);

lightRed.setShader(gradient);

canvas.drawArc(rectf, -90, 360, false, lightRed);

Hey I stole thi

...

你只需要记住一点三角。 如果你的中心点是x ， y和radius是r ; 那么角度alpha上的圆上的坐标是： pointX = x + Math.cos(alpha) * r;

pointY = y + Math.sin(alpha) * r;

而且你有两个角度，对应于起点和终点。 You just have to remember a little trigonometry. If your center point is x, y and radius is r; then the coo

...

这是一个函数，它应该完成梯度线绘制 function drawgradientline(x,y,height){

var grd = context.createLinearGradient(x, y, 1, height);

grd.addColorStop(0, '#12a6eb');

grd.addColorStop(1, '#ebc711');

context.fillStyle = grd;

context.fill();

}

Her

...

是的，这是可能的！ Javascript中有一个名为createLinearGradient的方法，它将画布上下文作为源，并应用由sx ， sy ， dx ， dy坐标定义的渐变。 前两个选项定义起始坐标，最后两个定义结束坐标。 var gradient = context.createLinearGradient(sx, sy, dx, dy);

调用此方法后，您可以通过调用colorStop方法将渐变颜色应用于画布： gradient.addColorStop(0, '#f00'); /

...

实际上，这些算法似乎有所不同。 不太清楚为什么，但我会说CSS不认为rgba(0,0,0,0)像canvas一样是透明的黑色像素 ，而是透明 。 2D画布将从所有4个RGBA通道值直接合成，直到下一次停止，而CSS似乎理解为特定情况下透明。 要在画布上获得与CSS相同的结果，只需更改alpha值，就必须将第一个透明光圈设置为下一个透明光圈。 var ctx = c.getContext('2d'),

grad = ctx.createLinearGradient(0,0,0,150);

g

...

稍微搜索一下，我从Mozilla Development Network找到了这个例子 function draw() {

var ctx = document.getElementById('canvas').getContext('2d');

var radgrad = ctx.createRadialGradient(0,0,1,0,0,150);

radgrad.addColorStop(0, '#A7D30C');

radgrad.addColorSto

...

您可以使用转换。 就像在这个实例中一样 。 context.save() ;

context.translate(150,150) ;

context.scale(2,1) ;

context.translate(-150,-150) ;

context.moveTo(150, 150);

context.arc(150, 150, 50, 0, 3*Math.PI/4, true);

context.closePath();

context.stroke() ;

context.r

...

模糊和阴影效果不包含在主画布库中，但您可以创建自己的库，也可以使用像easel.js这样的外部画布库，但是有很多与HTML5 相关的库。 您可以选择最适合您的产品。 作为模糊效果的问题，您可以使用Mario Klingeman stackblur javascript实现： http ：//www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html。 它易于使用且速度极快。 对于发光效果，随机纹理生成的一个好方法是在javasc

...

与SVG或HTML不同，HTML Canvas上没有分层或分组。 你不能将弧/渐变包裹在另一个低不透明度元素中; 您必须直接将不透明度(或着色或其他)更改传播到最终属性。 你的颜色#1f0000相当于rgb(31,0,0) ; 使用rgba降低此特定色块的不透明度。 var opacity = 0.55; //55% visible

grd.addColorStop(1,'transparent');

grd.addColorStop(0.1,'rgba(31,0,0,'+opacity+')')

...

是的，您可以重复使用一次创建的CanvasGradient， var ctx = c.getContext("2d");

var grads = [];

for(var i=0; i<20; i++){

grads.push(ctx.createLinearGradient(0,0,300,0));

}

grads.forEach(function(grad, i){

var a = i * (360 / 20);

grad.addColorStop(0, 'hsl('

...