hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

canvas如何来绘制一个椭圆形?canvas画椭圆的要领总结【html5教程】

2019-11-26HTML搜搜PHP网69°c
A+ A-
canvas元素在html5中是用于在浏览器中绘图的,所以canvas能够完成绘制许多差别的图,那末,本日我们就来看一看canvas如何来绘制一个椭圆形,话不多说,让我们来直接看正文吧。

起首我们来看一下canvas自带的绘制椭圆的要领

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

参数(从左到右):

(出发点x,出发点y,半径x,半径y,扭转的角度,肇端角,结果角,顺时针照样逆时针)

我们来看canvas自带的绘制椭圆的要领代码:

<!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('2d');
        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画的椭圆结果以下:

申明:这类要领现在好像只要谷歌支撑,其他浏览器还未存在ellipse()。

既然上述要领没法支撑其他浏览器,我们就来看看其他canvas绘制椭圆的要领。

一、应用canvas画圆的要领来绘制一个椭圆

这类要领用到了一个canvas函数scale,scale函数能完成canvas的缩放。缩放有水温和垂直两个方向,代码中把canvas程度方向放大了,而垂直方向稳定,因而,本来arc画出的圆形就变成了一个椭圆。

canvas绘制椭圆的代码以下:

<!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('myCanvas');
      var context = canvas.getContext('2d');
      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 = 'pink';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

canvas椭圆结果以下:


二、canvas画椭圆之运用贝赛尔曲线绘制椭圆

这类要领绘制椭圆是把一个椭圆分成了4条贝塞尔曲线,用他们连成了一个椭圆。

canvas绘制椭圆的代码以下:

<!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椭圆结果以下:

三、canvas画椭圆之运用两条贝赛尔曲线画出椭圆

canvas绘制椭圆的代码以下:

//椭圆 
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。

本篇文章到这里就完毕了,更多精彩内容能够关注ki4网。

以上就是canvas如何来绘制一个椭圆形?canvas画椭圆的要领总结的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
canvas如何来绘制一个椭圆形?canvas画椭圆的要领总结【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:
推荐阅读