Я хочу нарисовать кривую, подобную упомянутой здесь, на холсте HTML5. Может кто-нибудь указать, какие методы мне следует использовать?

-3
Arindam Sahu 24 Сен 2018 в 19:59

2 ответа

Лучший ответ

Это выглядит примерно как -sin, поэтому вы можете сделать что-то вроде:

let cnvs = document.getElementById('cnvs')
let ctx = cnvs.getContext('2d');
ctx.beginPath();
for (let i = 0; i < cnvs.width; i++){
    ctx.lineTo(i, cnvs.height/2-Math.sin(i*(Math.PI/180))*50);
}
ctx.stroke()
<canvas id='cnvs'></canvas>

Таким образом, их идея состоит в том, чтобы выразить вашу кривую как некоторую функцию от x (здесь это -sin(x)), а затем использовать метод контекста визуализации lineTo для рисования линий между различными точками на этой кривой. Пока вы увеличиваете каждые несколько пикселей (здесь 1 настолько хорош, насколько это возможно), вы получите эффект красивого сглаженного графика.

0
Joe Iddon 24 Сен 2018 в 17:16