canvas

Bertha 。 2021-12-23 14:19 321阅读 0赞

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

转载于:https://www.cnblogs.com/BigIdiot/p/3580456.html