绘制圆弧将线性渐变html5画布
绘制圆弧将线性渐变html5画布
提问于 2013-01-07 18:23:43
我在画布上画了一个圆弧，可以给它三种颜色的线性渐变吗？？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-07 20:23:22
是的，这是可能的！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方法使其循环。
Stack Overflow用户
发布于 2018-08-08 00:20:59
我看不到OP发布的示例(断开的链接？)，但我有一个非常类似的问题，这里的答案对我都没有帮助。
所以，这就是我想要做的：
这就是我是如何做到的：
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 *
* _ | *
** |\ | / **
** \ | |/_ **
* | *
** | **
** | **
*** | ***
***********Stack Overflow用户
发布于 2017-04-16 13:00:00
这就是你要的。
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14193956
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号