Maison >interface Web >Tutoriel H5 >Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevas

Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevas

不言original: 2018-09-30 09:17:3912601parcourir

L'élément canevas en HTML5 est utilisé pour dessiner des images dans le navigateur, donc canevas peut dessiner de nombreuses images différentes. Aujourd'hui, nous allons donc voir comment canevas dessine une ellipse. Sans plus tarder, passons directement au texte. .

Tout d'abord, jetons un coup d'œil à la méthode de dessin d'une ellipse fournie avec Canvas

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle , dans le sens inverse des aiguilles d'une montre).

Paramètres (de gauche à droite) :

(point de départ x, point de départ y, rayon x, rayon y, angle de rotation , point de départ Angle de départ, angle résultat, dans le sens des aiguilles d'une montre ou dans le sens inverse)

Regardons le code de la méthode pour dessiner une ellipse fourni avec le canevas :

<!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 L'effet de l'ellipse dessinée est le suivant :

Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevas

Remarque : Cette méthode semble n'être prise en charge que par Google à l'heure actuelle, et ellipse() le fait n'existe pas encore dans d'autres navigateurs.

Étant donné que la méthode ci-dessus ne peut pas prendre en charge les autres navigateurs, examinons d'autres méthodes de canevas pour dessiner des ellipses.

1. Utilisez Canvas pour dessiner un cercle afin de dessiner une ellipse

Cette méthode utilise une échelle de fonction Canvas, qui peut réaliser la mise à l'échelle du canevas. Il existe deux directions de mise à l'échelle : horizontale et verticale. Dans le code, le canevas est agrandi dans la direction horizontale, mais la direction verticale reste inchangée. Par conséquent, le cercle initialement dessiné par un arc devient une ellipse.

Le code pour dessiner une ellipse sur toile est le suivant :

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

L'effet ellipse sur toile est le suivant :

2. Utilisez la courbe de Bézier pour dessiner une ellipse sur la toile

Cette méthode de dessin d'ellipse est dessiner une ellipse Elle est divisée en 4 courbes de Bézier et reliées pour former une ellipse.

Le code pour dessiner une ellipse sur toile est le suivant :

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

L'effet ellipse sur toile est le suivant :

Comment dessiner une ellipse avec canevas ? Résumé des méthodes pour dessiner des ellipses avec canevas

3. Utilisez deux courbes de Bézier pour dessiner une ellipse sur toile

Le code pour dessiner une ellipse sur toile est le suivant :

//椭圆 
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; 
}

Remarque : Cette méthode n'a besoin de mémoriser que ce point. Le rapport entre la largeur de l'ellipse et les coordonnées des points de contrôle de la courbe de Bézier qui dessine l'ellipse est le suivant :

Point de contrôle de Bézier x = (largeur de l'ellipse/0,75)/2.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez faire attention au site Web chinois php.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：6 principes que HTML5 doit respecter (introduction)Article suivant：6 principes que HTML5 doit respecter (introduction)

Articles Liés

Voir plus