HTML5 Canvas中的曲线绘制 [英] Curved line draw in HTML5 Canvas

问题描述

我想在HTML5画布上绘制一条此处提到的的曲线.有人可以指出我应该使用哪种方法.

I want to draw a curve like this mentioned here in HTML5 canvas. Can someone point to what methods should I use.?

推荐答案

另一种实现方法是使用

Yet an other way of doing it is using the method bezierCurveTo

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 536;
let ch = canvas.height = 100;
   
ctx.beginPath();
ctx.moveTo(0,28)
ctx.bezierCurveTo(0,28,31,7,70,8);
ctx.bezierCurveTo(109,9,313,99,425,90);
ctx.bezierCurveTo(516,82.5,536,55,536,55);
ctx.stroke();

canvas{border:1px solid #d9d9d9;}

<canvas></canvas>

这篇关于HTML5 Canvas中的曲线绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！