用canvas画阴阳鱼

来源：互联网发布：淘宝客服活动流程编辑：程序博客网时间：2024/04/28 16:22

代码如下：

<!DOCTYPE html><html><head><script>    var drawing = function(){        var c=document.getElementById("myCanvas");        var ctx=c.getContext("2d");        //画个阴阳鱼        ctx.beginPath();        ctx.arc(100,100,90,-90*Math.PI/180,90*Math.PI/180,true);        ctx.fillStyle = "black";        ctx.fill();        ctx.beginPath();        ctx.arc(100,100,90,90*Math.PI/180,-90*Math.PI/180,true);        ctx.stroke();        ctx.beginPath();        ctx.arc(100,55,44,-90*Math.PI/180,90*Math.PI/180,true);        ctx.fillStyle = "white";        ctx.fill();        ctx.beginPath();        ctx.arc(100,55,11,0,360*Math.PI/180,true);        ctx.fillStyle = "black";        ctx.fill();        ctx.beginPath();        ctx.arc(100,145,45,90*Math.PI/180,-90*Math.PI/180,true);        ctx.fillStyle = "black";        ctx.fill();        ctx.beginPath();        ctx.arc(100,145,11,0,360*Math.PI/180,true);        ctx.fillStyle = "white";        ctx.fill();    }    //要先加载对象才能调用    window.onload = drawing;</script></head><body>    <canvas id = "myCanvas" width="200" height="200" style = "border:1px dashed gray;"></canvas></body></html>

这里有很多重复的代码，可以封装一个函数来画圆。这个函数所需要参数有圆心坐标，半径，起始和结束的角度，填充还是不填充以及填充的颜色，更重要的是要有canvas对象，没有对象我们什么也干不了。

var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){    //yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白    //还要把ctx对象传进来    if(yn==1){        ctx.beginPath();        ctx.arc(x,y,r,begin,end,true);        if(color==1)            ctx.fillStyle = "black";        else            ctx.fillStyle = "white";        ctx.fill();    }    else{        ctx.beginPath();        ctx.arc(x,y,r,begin,end,true);        ctx.stroke();    }}

改动后的代码

<!DOCTYPE html><html><head><script>    var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){    //yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白    //还要把ctx对象传进来        if(yn==1){            ctx.beginPath();            ctx.arc(x,y,r,begin,end,true);            if(color==1)                ctx.fillStyle = "black";            else                ctx.fillStyle = "white";            ctx.fill();        }        else{            ctx.beginPath();            ctx.arc(x,y,r,begin,end,true);            ctx.stroke();        }    }    var drawing = function(){        var c=document.getElementById("myCanvas");        var ctx=c.getContext("2d");        //画个阴阳鱼                drawingCircle(100,100,90,-90*Math.PI/180,90*Math.PI/180,1,1,ctx);        drawingCircle(100,100,90,90*Math.PI/180,-90*Math.PI/180,0,0,ctx);        drawingCircle(100,55,44,-90*Math.PI/180,90*Math.PI/180,1,0,ctx);        drawingCircle(100,55,11,0*Math.PI/180,360*Math.PI/180,1,1,ctx);        drawingCircle(100,145,45,90*Math.PI/180,-90*Math.PI/180,1,1,ctx);        drawingCircle(100,145,11,0*Math.PI/180,360*Math.PI/180,1,0,ctx);    }    //要先加载对象才能调用    window.onload = drawing;</script></head><body>    <canvas id = "myCanvas" width="200" height="200" style = "border:1px dashed gray;"></canvas></body></html>

运行效果如下：

这里写图片描述

相关JavaScript方法：
1，beginPath( )：开始路径
2，closePath ( )：结束路径，并且连接起点和终点
3，arc(横坐标,纵坐标,半径,起始角度,结束角度,旋转方向)：如图

这里写图片描述

4，stroke( )：将arc画的圆用线描出来，默认黑色
5，strokeStyle：描线的颜色，要在stroke（）之前才能生效
6，fill( )：将封闭的图形内部填充，默认黑色，要改变颜色用fillStyle

下个目标：让阴阳鱼转动起来

转动的阴阳鱼

阅读全文

0 0