Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
255 views
Welcome To Ask or Share your Answers For Others

1 Answer

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...