gpt4 book ai didi

javascript - 如何在 Canvas 中填充二次曲线?

转载 作者:太空宇宙 更新时间:2023-11-03 21:05:19 25 4
gpt4 key购买 nike

是否可以填充二次曲线?

我是 canvas 的新手,我想填充我在 context.quadraticCurveTo() 中绘制的上半部分的颜色,但是当我尝试 context.fill() 时,它没有填充我预期的部分.我想填充被笔划分隔的 Canvas 的上部。

见附件。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ch = canvas.height;
const cw = canvas.width;

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.quadraticCurveTo(ch, 0, cw, 35);
ctx.stroke();
ctx.fill();
#canvas {
border: 1px solid;
}
<canvas id="canvas"></canvas>

最佳答案

最简单的方法可能就是沿着 Canvas 边缘画一些线来形成一个封闭的形状:

enter image description here

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ch = canvas.height;
const cw = canvas.width;

// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.quadraticCurveTo(ch, 0, cw, 35);
ctx.lineTo(cw, 0); // these two lines
ctx.lineTo(0, 0); // are new
// you can even add a third one that goes from 0,0
// to 0,60 … but .fill() closes the shape even without it
ctx.stroke();
ctx.fill();
#canvas {
border: 1px solid;
}
<canvas id="canvas"></canvas>

关于javascript - 如何在 Canvas 中填充二次曲线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53944231/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com