Как сделать глаз, используя arcTo - PullRequest
Новая
       8

Как сделать глаз, используя arcTo

0 голосов
/ 30 апреля 2018

Я пытаюсь сделать белую часть глаза:

но я не знаю, что я делаю неправильно, может быть, это не предполагает использование arcTo, проблема в том, как мне сделать угол в глазу? 

function main() {
    var c2d = document.getElementById("acanvas").getContext("2d");	 
    olho(c2d);
}
function olho(c2d) {
	c2d.fillStyle = 'blue';
// starting point
	c2d.fillRect(120, 220, 10, 10);

	c2d.fillStyle = 'red';
// control point one
	c2d.fillRect(155, 220, 10, 10);
// control point two
	c2d.fillRect(190, 220, 10, 10);
	c2d.strokeStyle = "black";
	c2d.beginPath();
	c2d.moveTo(120, 220);
	c2d.arcTo(190, 220, 155, 220, 30);
	c2d.stroke();	
		

}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="book.js">

    


        </script>
    </head>
    <body onload="main();">
        <canvas id="acanvas" width="1028" height="1028" />
    </body>
</html>

1 Ответ

0 голосов
/ 30 апреля 2018

Нарисуйте верхнюю и нижнюю половины отдельно с помощью quadraticCurveTo, например: 

function draw(ctx, x, y, w, h)
{
  let c = x + w / 2;
  ctx.beginPath();
  ctx.moveTo(x, y);
  // upper arc
  ctx.quadraticCurveTo(c, y - h, x + w, y);
  // lower arc
  ctx.quadraticCurveTo(c, y + h, x, y);
  ctx.stroke();
}

const cnv = document.getElementById("eye-canvas");
const ctx = cnv.getContext("2d");

// context, x/y position, width, height
draw(ctx, 10, 75, 280, 130);
<html>
<body>
  <canvas id="eye-canvas" width="300" height="150" style="border:1px solid #ddd;" />
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...