canvas 太极

最新推荐文章于 2022-11-27 20:00:00 发布

LygTom

最新推荐文章于 2022-11-27 20:00:00 发布

阅读量373

点赞数

分类专栏：前端 HTML5，拖放 js 文章标签： js-html-css

本文链接：https://blog.csdn.net/LygTom/article/details/79984786

版权

前端同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

HTML5，拖放

2 篇文章 0 订阅

订阅专栏

闲着无事，想起来使用canvas画个太极玩玩，具体思想
先画两个半圆用黑白区分组合在一起成为圆
再画两个圆定位在具体位置构成太极图案中的曲线视觉差
最后再画那两个小圆

var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    //绘制左侧的白色半圆直径都是150
    cxt.fillStyle="#FFFFFF";
    cxt.beginPath();
    cxt.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);
    cxt.closePath();
    cxt.fill();
    //绘制右侧的黑色半圆
    cxt.fillStyle="#000000";
    cxt.beginPath();
    cxt.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);
    cxt.closePath();
    cxt.fill();
     //绘制下面的黑色圆
     cxt.fillStyle="#000000";
     cxt.beginPath();
     cxt.arc(300,275,75,0,2*Math.PI,false);
     cxt.closePath();
     cxt.fill();
     //绘制上面的白色圆
     cxt.fillStyle="#FFFFFF";
     cxt.beginPath();
     cxt.arc(300,125,75,0,2*Math.PI,false);
     cxt.closePath();
     cxt.fill();
      //绘制两个小圆
      cxt.fillStyle="FFFFFF";
      cxt.beginPath();
      cxt.arc(300,275,10,0,2*Math.PI,false);
      cxt.closePath();
      cxt.fill();
      //绘制黑色小圆
      cxt.fillStyle="#000";
      cxt.beginPath();
      cxt.arc(300,125,10,0,2*Math.PI,false);
      cxt.closePath();
      cxt.fill();

这样实现起来还算可以，本着不写重复代码的原则就将这些步骤做了封装。

    var black = "black",white = "white"
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //左侧黑色半圆
    drawCic(300,200,150,1.5*Math.PI,Math.PI/2,black,true);
    //右侧白色半圆
    drawCic(300,200,150,Math.PI/2,1.5*Math.PI,white,true);
    //大黑圆
    drawCic(300,275,75,0,2*Math.PI,black,true);
    //大白圆
    drawCic(300,125,75,0,2*Math.PI,white,true);
    //小白圆
    drawCic(300,275,10,0,2*Math.PI,white,true);
    //小黑圆
    drawCic(300,125,10,0,2*Math.PI,black,true);
    /*注
    * drawCic 各参数
    * x ---圆心x
    * y ---圆心y
    * r---半径
    * begin--起始角度
    * point--目标角度
    * color--颜色
    * boolean--选画方向
    * */
    function drawCic(x,y,r,begin,point,color,boolean){
        ctx.fillStyle =color;
        ctx.beginPath();
        ctx.arc(x,y,r,begin,point,color,boolean);
        ctx.closePath();
        ctx.fill();
    }