Canvasで楕円を描く方法まとめ-H5 チュートリアル-php.cn

Canvasで楕円を描く方法まとめ

不言

リリース： 2018-09-30 09:17:38

オリジナル

12530 人が閲覧しました

HTML5 の Canvas 要素はブラウザーで画像を描画するために使用されるため、Canvas はさまざまな画像を描画できます。それでは、今日は Canvas がどのように楕円を描画するかを見ていきます。早速本文に入りましょう。。

まず、canvas に付属している楕円を描く方法を見てみましょう

##ellipse(x, y, radiusX, radiusY, Rotation, startAngle, endAngle, anticlockwise )

。

パラメータ (左から右へ):

(始点 x、始点 y、半径 x、半径 y、回転角度) 、開始点開始角度、結果の角度、時計回りまたは反時計回り)

キャンバスに付属の楕円を描画するためのメソッドコードを見てみましょう:

<!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>

ログイン後にコピー

キャンバスで描画楕円効果は次のとおりです:

Canvasで楕円を描く方法まとめ

注: このメソッドは現在 Google によってのみサポートされているようで、ellipse() はまだ存在しません。他のブラウザでは。

上記のメソッドは他のブラウザをサポートできないため、楕円を描画する他の

canvas メソッドを見てみましょう。

1. Canvas を使用して円を描画し、楕円を描画します。

このメソッドは、 Canvas のスケーリングを実現する機能を使用します。拡大縮小の方向は水平方向と垂直方向の2つあり、コードでは水平方向にはキャンバスが拡大されますが、垂直方向はそのままなので、元々円弧で描いていた円が楕円になります。

キャンバス描画楕円のコードは次のとおりです:

<!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>

ログイン後にコピー

キャンバスの楕円効果は次のとおりです:

2. ベジェ曲線を使用して、キャンバス上に楕円を描画します。

この楕円描画方法は、次のように分割します。楕円を作成する 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>

ログイン後にコピー

キャンバスの楕円効果は次のとおりです:

Canvasで楕円を描く方法まとめ

3. 2 つのベジェ曲線を使用してキャンバス上に楕円を描画します

##キャンバス上に楕円を描画するコードは次のとおりです。 ##

//椭圆 
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
 var k = (width/0.75)/2, 
w = width/2, 
h = height/2; 
this.beginPath(); 
this.moveTo(x, y-h); 
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h); 
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h); 
this.closePath(); return this; 
}

ログイン後にコピー

注: この方法では、楕円を描画するベジェ曲線の制御点の座標に対する楕円の幅の比率を次のように覚えておくだけで済みます。ベジェ制御点 x=(楕円幅/0.75) /2。この記事はここで終わります。さらに興味深い内容については、php 中国語 Web サイトをご覧ください。

以上がCanvasで楕円を描く方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。