绘制弧线将线性渐变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('
...