如何在D3中绘制这样的圆路径？

发布于 2025-01-27 04:25:54 字数 793 浏览 2 评论 0 原文

我想在D3中的下图绘制像图像一样的圆路径。

我尝试但不起作用。

const patternCanvas = document.createElement('canvas');
    const patternContext = patternCanvas.getContext('2d');
    patternCanvas.width = 50;
    patternCanvas.height = 50;
    patternContext.fillStyle = '#fff';
    patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
    patternContext.stroke();
    const pattern = this.context.createPattern(patternCanvas, 'repeat');
    this.context.fillStyle = pattern;
    this.context.beginPath();
    this.context.closePath();
    this.context.fill();
    this.context.stroke();

感谢您的帮助！

原文

I want to draw circle path like image below in d3.

I try this but not working.

const patternCanvas = document.createElement('canvas');
    const patternContext = patternCanvas.getContext('2d');
    patternCanvas.width = 50;
    patternCanvas.height = 50;
    patternContext.fillStyle = '#fff';
    patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
    patternContext.stroke();
    const pattern = this.context.createPattern(patternCanvas, 'repeat');
    this.context.fillStyle = pattern;
    this.context.beginPath();
    this.context.closePath();
    this.context.fill();
    this.context.stroke();

Thank for your help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

短暂陪伴 2025-02-03 04:25:54

请参阅文档＆amp;示例在这里：

基本圆圈大纲是这样的：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

基本填充的圆圈像这样完成：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#888'
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();

See the documentation & examples here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

The basic circle outline is done like so:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

The basic filled circle is done like so:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#888'
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();

回复收藏 0 原文

~没有更多了~