canvas

1.根据角度算弧度 R*Math.PI/180

2. sin =a/c; //角的对边比斜边

3. cos =b/c; //角的邻边比斜边

4. tan =a/b; //角的对边比对边的邻边

5.已知圓的中心点坐标(c1,c2)求圆环的坐标 
       x = c1 + Math.sin( 弧度 * Math.PI / 180 ) * R;
       y = c2 + Math.cos( 弧度 * Math.PI / 180 ) * R;

6.自定义画圓函数

    /**
     * 用点画圓
     * @param c
     * @param x :中心坐标x
     * @param y :中心坐标y
     * @param r :半径
     */
    function drawCircle(c,x,y,r){
        for(var i=0;i<360;i++){
            var X = x + Math.sin(Math.PI*i/180) * r;
            var Y = y + Math.cos(Math.PI*i/180) * r;
            c.lineTo(X,Y);
            c.stroke();
        }
    }

7. 直线指向鼠标

    /**
     * 直线指向鼠标
     * @param c
     * @param x :直线的x坐标
     * @param y :直线的y坐标
     * @param r : 直线的长度
     */
    function pointing(c,x,y,r){
        document.addEventListener('mousemove',function(e){
            var X = e.clientX - x ;
            var Y = e.clientY - y;
            var angle = Math.atan2(Y,X);  //单位是弧度,不用再换算
            c.clearRect(0,0,500,400);
            c.beginPath();
            c.moveTo(x,y);
            c.lineWidth=10;
            c.lineTo(x+Math.cos(angle)*r,y+Math.sin(angle)*r);
            c.stroke();
        },false);
    }

 

    /**
     * 绕中心点旋转并改变颜色
     * @param c
     */
    function rotateRect(c){
        var angle=0;
        setInterval(function(){
            c.clearRect(0,0,500,400);
            c.save();
            c.translate(250,200); //移动画布左上角到旋转的中心点
            c.rotate(Math.PI/180*angle++);
            c.fillStyle="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+");" //随机设置颜色
            c.fillRect(100,100,20,20);
            c.restore();
        },10);
    }

 

    /**
     * 万花筒
     * @param c
     */
    function kaleidoscope(c){
        var angle=0;
        var arr=[];
        setInterval(function(){
            c.clearRect(0,0,500,400);
            for(var i=0;i<arr.length;i++){
                c.save();
                c.translate(250,200); //移动画布左上角到旋转的中心点
                c.rotate(Math.PI/180*arr[i].angle);
                c.fillStyle=arr[i].color; //随机设置颜色
                c.fillRect(arr[i].num,arr[i].num,20,20);
                c.restore();
            }
        },10);

        setInterval(function(){ //改变方块显示的弧度以及距离圓心的距离
            for(var i =0 ; i<arr.length;i++){
                arr[i].angle++;
                arr[i].num-=0.2;
            }
        },60)

        setInterval(function(){       //添加方块
            arr.push({angle:0,num:100,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"});
        },1000)
    }

 

    /**
     * 模拟转盘
     * @param c
     */
    function zhuanpan(c){
        var colors=['red','orange','yellow','green','gray','blue','purple','black'];
        var texts=['NBA','CBA','FIFA','WNBA','WCBA','UBA','MBA','EBA'];
        c.translate(250,200);
        var angle=0;
        var speed=20+10*Math.random();
        var t=setInterval(function(){
            c.clearRect(0,0,500,400);
            c.save();
            if(speed<0.3){
                clearInterval(t);
                c.font="20px micvrosoft yahei";
                c.fillText(texts[texts.length-Math.ceil(angle/45)],0,-160);
            }
            if(angle>360)angle=0;
            speed*=0.99;
            angle+=speed;
            c.rotate(angle*Math.PI/180);
            for(var i=0;i<8;i++){
                c.beginPath();
                c.moveTo(0,0);
                c.arc(0,0,100,45*i*Math.PI/180,45*(i+1)*Math.PI/180,false);
                c.fillStyle=colors[i];
                c.strokeStyle="fff";
                c.closePath();
                c.stroke();
                c.fill();
            }

            c.beginPath();
            c.arc(0,0,10,0,2*Math.PI,false);
            c.fillStyle='#123456';
            c.fill();

            for(i=0;i<8;i++){
                c.save();
                c.beginPath();
                c.fillStyle="#fff";
                c.font="14px 微软雅黑";
                c.rotate(Math.PI/180*(i*45+30));
                c.fillText(texts[i],50,0);
                c.restore();
            }
            c.restore();

            c.beginPath();
            c.moveTo(0,0);
            c.lineTo(40,0);
            c.strokeStyle='pink';
            c.lineWidth=4;
            c.stroke();
        },1);
    }