캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약-H5 튜토리얼-php.cn

캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약

不言

풀어 주다： 2018-09-30 09:17:38

원래의

12604명이 탐색했습니다.

HTML5의 캔버스 요소는 브라우저에서 그림을 그리는 데 사용되므로 캔버스는 다양한 그림을 그릴 수 있습니다. 따라서 오늘은 캔버스가 타원을 그리는 방법을 살펴보겠습니다. .

먼저 타원

ellipse(x, y, radiusX, radiusY,rotation, startAngle, endAngle, anticlockwise)을 그리는 캔버스 고유의 방법을 살펴보겠습니다.

매개변수(왼쪽에서 오른쪽으로):

(시작점 x, 시작점 y, 반지름 x, 반지름 y, 회전 각도, 시작 각도, 결과 각도, 시계 방향 또는 시계 반대 방향)

us Let's 캔버스와 함께 제공되는 타원을 그리는 방법에 대한 코드를 살펴보세요:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var  ctx=canvas.getContext(&#39;2d&#39;);
        canvas.width = 800;
        canvas.height = 800;
        if(ctx.ellipse){
            ctx.ellipse(300,300,200,100,0,0,Math.PI*2);
            ctx.fillStyle="blue";
            ctx.strokeStyle="#000";
            ctx.fill();
            ctx.stroke();
        }else{
            alert("no ellipse!");
        } 
    }
</script>
</body>
</html>

로그인 후 복사

캔버스로 그린 타원의 효과는 다음과 같습니다:

캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약

참고: 이 방법은 현재 다음에서만 지원되는 것 같습니다. Google 및 ellipse()는 다른 브라우저에는 아직 존재하지 않습니다.

위 방법은 다른 브라우저를 지원할 수 없으므로 타원을 그리는 다른 캔버스 방법을 살펴보겠습니다.

1. 캔버스를 사용하여 원을 그려 타원을 그립니다.

이 방법은 캔버스의 크기 조정을 구현할 수 있는 캔버스 함수 스케일을 사용합니다. 크기 조정에는 가로 방향과 세로 방향이 있습니다. 코드에서는 캔버스가 가로 방향으로 확대되지만 세로 방향은 변경되지 않습니다. 따라서 원래 원호로 그려진 원은 타원이 됩니다.

캔버스에 타원을 그리는 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById(&#39;myCanvas&#39;);
      var context = canvas.getContext(&#39;2d&#39;);
      var centerX = 0;
      var centerY = 0;
      var radius = 50;
      // save state
      context.save();
      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);
      // scale context horizontally
      context.scale(2, 1);
      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      // restore to original state
      context.restore();
      // apply styling
      context.fillStyle = &#39;pink&#39;;
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = &#39;black&#39;;
      context.stroke();
    </script>
  </body>
</html>

로그인 후 복사

캔버스 타원 효과는 다음과 같습니다.

베지어 곡선을 사용하여 캔버스로 타원을 그립니다

이것 방법 타원을 그리는 것은 타원을 4개의 베지어 곡선으로 나누고 이를 연결하여 타원을 그리는 것입니다.

캔버스 그리기 타원의 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 600;
    canvas.height = 600;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle="black";
        BezierEllipse2(context, 470, 200, 100, 20); //椭圆
    function BezierEllipse2(ctx, x, y, a, b){
        var k = .5522848,
        ox = a * k, // 水平控制点偏移量
        oy = b * k; // 垂直控制点偏移量</p> <p> ctx.beginPath();
        //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
        ctx.moveTo(x - a, y);
        ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
        ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
        ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
        ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
        ctx.closePath();
        ctx.stroke();
    };
</script>
</body>
</html>

로그인 후 복사

캔버스 타원 효과는 다음과 같습니다.

캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약