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);
    }