在HTML5画布中使用线性渐变绘制弧形

Question

在HTML5画布中使用线性渐变绘制弧形

htmlcanvas

7

我在画布中画了一个圆弧，是否可以给它设置三种颜色的线性渐变？

- wilsonrufus

3个回答

8

我无法查看原帖中的示例（链接已损坏？），但我有一个非常相似的问题，并且这里的所有答案都没有帮助到我。

所以，这就是我想做的：

这就是我如何做到的：

var center = { "x": 115, "y": 115 };
var radius = 100;
var quadrants = [
 {
     "angleStart": Math.PI * -0.5,
        "angleEnd": 0,
     "x1": center.x,
        "y1": center.y - radius,
        "x2": center.x + radius,
        "y2": center.y,
        "colorStops": [
         { "stop": 0, "color": "blue" },
            { "stop": 1, "color": "green" }
        ]
    },
 {
     "angleStart": 0,
        "angleEnd": Math.PI * 0.5,
     "x1": center.x + radius,
        "y1": center.y,
        "x2": center.x,
        "y2": center.y + radius,
        "colorStops": [
         { "stop": 0, "color": "green" },
            { "stop": 1, "color": "yellow" }
        ]
    },
 {
     "angleStart": Math.PI * 0.5,
        "angleEnd": Math.PI,
     "x1": center.x,
        "y1": center.y + radius,
        "x2": center.x - radius,
        "y2": center.y,
        "colorStops": [
         { "stop": 0, "color": "yellow" },
            { "stop": 1, "color": "red" }
        ]
    },
 {
     "angleStart": Math.PI,
        "angleEnd": Math.PI * 1.5,
     "x1": center.x - radius,
        "y1": center.y,
        "x2": center.x,
        "y2": center.y - radius,
        "colorStops": [
         { "stop": 0, "color": "red" },
            { "stop": 1, "color": "black" }
        ]
    }    
];

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Draw arc quadrants.
for (var i = 0; i < quadrants.length; ++i) {
  var quad = quadrants[i];
  var grad = ctx.createLinearGradient(quad.x1, quad.y1, quad.x2, quad.y2);
  // Color stops.
  for (var j = 0; j < quad.colorStops.length; ++j) {
    var cs = quad.colorStops[j]; 
    grad.addColorStop(cs.stop, cs.color);
  }
  // Draw arc.
  ctx.beginPath();
  ctx.arc(center.x, center.y, radius, quad.angleStart, quad.angleEnd);
  ctx.strokeStyle = grad;
  ctx.lineWidth = 30;
  ctx.stroke();
}

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="230" height="230" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

以下是我在实施之前的初步想法：

Linear gradient distribution on arc:

               ***********
          ***       |       ***
       **           |           **
     **             |             **
    *     _         |               *
  **       /|       |      \         **
 **       /         |      _\|        **
 *                  |                  *
*    4th Quadrant   |   1st Quadrant    *
*                   |                   *
*-------------------|-------------------*
*                   |                   *
*    3rd Quadrant   |   2nd Quadrant    *
 *          _       |                  *
 **       |\        |         /       **
  **        \       |       |/_      **
    *               |               *
     **             |             **
       **           |           **
          ***       |       ***
               ***********

- Vinicius

1

给你。

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

var x = 250,
y = 250,
radius = 200,
// 0deg   - 1.5 * Pi,
// 90deg  - 0   * Pi, 
// 180deg - 0.5 * Pi, 
// 270deg - 1   * Pi
angleStart = 1.5 * Math.PI,
angleEnd = 0.7 * Math.PI;

//Create gradient
var gradient = ctx.createLinearGradient(0,500,0, 0);
gradient.addColorStop(0, '#000');
gradient.addColorStop(1, '#40d6a5');


//Draw circle
ctx.beginPath();
ctx.arc(x, x, radius, 0, 2*Math.PI, false);
ctx.lineWidth = 30;
ctx.strokeStyle = 'rgba(255,255,255, 0.2)'
ctx.stroke();

//Draw arc
ctx.beginPath();
ctx.arc(x, y, radius, angleStart, angleEnd);
ctx.strokeStyle = gradient;
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.stroke();

不是我的代码，我在下面的链接中找到它。

http://codepen.io/alsheuski/pen/eJNwNX

或者这个。

http://jsfiddle.net/simonsarris/Msdkv/

- viciouskinid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Endre Simo · Accepted Answer

没问题！在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 方法使其成为圆形。