Рисование изогнутых линий в HTML5 Canvas - PullRequest
Новая
       5

Рисование изогнутых линий в HTML5 Canvas

0 голосов
/ 24 сентября 2018

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

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Еще один способ сделать это - использовать метод 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>
0 голосов
/ 24 сентября 2018

Ну, это выглядит примерно как -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)), а затем использовать * 1012 контекста рендеринга* метод рисования линий между различными точками на этой кривой.До тех пор, пока вы увеличиваете каждые несколько пикселей (здесь 1 так же хорош, как и получается), вы получите эффект хорошего сглаженного графика.

...