【问题标题】:How to draw a filled pizza slice in html5如何在html5中绘制一个填充的披萨片
【发布时间】:2015-07-05 21:50:02
【问题描述】:

我想在 html5 画布中绘制一个填充的披萨片。我尝试使用 arc 并填充它,如下面的代码所示;

context.fillStyle = "#FF0000";
context.beginPath();
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            0,2 * Math.PI/3-0.175, 0);
context.fill();
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            2 * Math.PI/3,4 * Math.PI/3-0.175, 0);
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.arc(node._private.position['x'],node._private.position['y'],node._private.style['width'].value + 10,
            4 * Math.PI/3,2 * Math.PI-0.175, 0);
context.lineTo(node._private.position['x'],
node._private.position['y']);
context.lineTo(node._private.position['x'] + node._private.style['width'].value + 10,
node._private.position['y']);
context.closePath();
context.stroke();

但是,它只能像预期的那样填充;

http://imgur.com/WwM1oEF

我也想填充该弧的上部(三角形区域)。我应该为该部分添加一个实心三角形还是有其他方法?

【问题讨论】:

  • 我解决了!在将线绘制到节点后,我应该填充弧线。非常感谢。
  • 当您自己找到答案时,please answer your own question 这样任何未来的访问者都可以从您的体验中受益。
  • 感谢您的建议 :)

标签: javascript html html5-canvas fill


【解决方案1】:

我解决了!在将线绘制到节点后,我应该填充弧线。非常感谢

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-09-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多