canvas画布实现的集中效果

红太狼 2023-06-07 03:17 23阅读 0赞

### 1、canvas-画布图片旋转 ###

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

**代码： **

### 2、canvas-图片跟随鼠标移动 ###

**代码：**

### 3、canvas-矩形统计图表 ###

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1][]

**代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="./jquery.js"></script>
    		<title></title>
    		<style type="text/css">
    			
    </style>
    	</head>
    	<body>
    	<canvas id="c3" width="800" height="600"></canvas>
    	</body>
      <script>
    var c3=document.getElementById("c3");
          var ctx=c3.getContext("2d");
          var rows=[{name:"东口",val:2800},
                    {name:"西口",val:2700},
                    {name:"南口",val:3100},
                    {name:"地铁口",val:3500}
                  ];
                  
          //1.创建循环遍历数组中每个元素
          for(var i=0;i<rows.length;i++){
            // 2.创建变量x,y w h
            // 3.并且分别计算
            var w=50;
            var h=rows[i].val/10;
            var x=i*100+50;
            var y=600-h;    
            // console.log(rows[i].val)
            // 3.1指定实心样式
            ctx.fillStyle=rc();
            // 3.2指定矩形透明度
            ctx.globalAlpha=0.6;
    
            function rc(){
              var r=Math.floor(Math.random()*255);
              var g=Math.floor(Math.random()*255);
              var b=Math.floor(Math.random()*255);
              ctx.fillStyle=`rgb(${r},${g},${b})`;
            } 
            // 4.创建实心对应矩形 
            ctx.fillRect(x,y,w,h);  
            // 5.绘制分公司名称
            // 6.设置文本颜色，黑色、
            ctx.fillStyle="#000";
            // 7.文本大小
            ctx.font="25px SimHei";
            // 8.分公司名称
            var n=rows[i].name;
            ctx.fillText(n,x,600-5);
            // 9，绘制销售额
            var v=rows[i].val;
            ctx.fillText(v,x,600-30-h);
          }
      </script>
    </html>

### 4、canvas-绘制笑脸，张嘴闭嘴 ###

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2][]

**代码： **

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="./jquery.js"></script>
    		<title></title>
    		<style type="text/css">
    			
    </style>
    	</head>
    	<body>
    	<canvas id="c3" width="500" height="400"></canvas>
    	</body>
      <script>
    var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");
        // 闭嘴笑脸
        function closeM(){
          ctx.clearRect(0,0,500,400)
          // 1.绘制最外层轮廓圆脸
          ctx.beginPath();
          ctx.strokeStyle="#f35"
          ctx.arc(250,200,100,0,2*Math.PI);
          // 2.绘制闭嘴
          ctx.lineTo(250,200)
          ctx.stroke();
          // 3.绘制实心眼球
          ctx.beginPath();
          ctx.fillStyle="#a32";
          ctx.arc(270,155,20,0,2*Math.PI);
          ctx.fill();
          // 4.绘制实心眼神
          ctx.beginPath();
          ctx.fillStyle="#fff";
          ctx.arc(278,160,10,0,2*Math.PI) ;
          ctx.fill()
          // 4.1眼珠
          ctx.beginPath();
          ctx.fillStyle="#000";
          ctx.arc(283,163,5,0,2*Math.PI) ;
          ctx.fill()
        }
        // 张嘴笑脸
        function openM(){
          ctx.clearRect(0,0,500,400);
          // 1.绘制最外层轮廓圆脸
          ctx.beginPath();
          ctx.strokeStyle="#f35"
          ctx.arc(250,200,100,30*Math.PI/180,340*Math.PI/180);
          // 2.绘制闭嘴
          ctx.lineTo(250,200);
          // 闭合路径 结束点到开始点
          ctx.closePath();
          ctx.stroke();
          // 3.绘制实心眼球
          ctx.beginPath();
          ctx.fillStyle="#a32";
          ctx.arc(270,155,20,0,2*Math.PI);
          ctx.fill();
          // 4.绘制实心眼神
          ctx.beginPath();
          ctx.fillStyle="#fff";
          ctx.arc(278,160,10,0,2*Math.PI) ;
          ctx.fill()
          // 4.1眼珠
          ctx.beginPath();
          ctx.fillStyle="#000";
          ctx.arc(283,163,5,0,2*Math.PI) ;
          ctx.fill()
        } 
        //openM()  closeM()
        // 1.创建变量数值
        var index=0;
        // 2.创建定时器
        var t=setInterval(()=>{
           // 3数值自增
           index++;
        // 4.偶数 张嘴
        if(index%2==0){
          openM();
        }else{
         // 5.奇数 闭嘴 
         closeM();
        }
        
        },500)
      </script>
    </html>

### 5、cavas-圆形动态进度条 ###

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3][]

**代码：**

### 6、canvas模拟实现树的生长 ###

**样式图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 4][]

**代码：**

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tree</title>
    </head>
    <body>
        <canvas id='d1' width="500" height="400" style="border:dashed 2px #ccc;"></canvas>
        <script>
        var drawtree = function (ctx,startx,starty,length,angle,depth,branchWidth){
            var rand=Math.random,
            n_length,n_angle,n_depth,maxbranch=4,
            endx,endy,maxangle=2 * Math.PI / 4;
            var subbranch;
            ctx.beginPath();
            ctx.moveTo(startx,starty);
            endx=startx + length * Math.cos(angle);
            endy=starty + length * Math.sin(angle);
            ctx.lineCap='round';
            ctx.lineWidth=branchWidth;
            ctx.lineTo(endx,endy);
            if(depth<=2 ){
                //树的枝干
                ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +128) >>0) + ',0)';
            }
            else{
                //树的叶子
                ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +64) >>0) + ',50,25)';
            }
            ctx.stroke();
            n_depth = depth-1;
            //判断树是否结束
            if(!n_depth){
                return;
            }
            subbranch= (rand() * (maxbranch-1)) + 1;
            branchWidth *=0.5; 
            for(var i=0;i<subbranch;i++){
                n_angle = angle +rand() * maxangle -maxangle *0.5;
                n_length = length * (0.5 + rand() *0.5);
                setTimeout(function (){
                    drawtree(ctx,endx,endy,n_length,n_angle,n_depth,branchWidth);
                    return;
                },500)
            }
        }
     
        var canvas=document.getElementById('d1');
        var ctx= canvas.getContext('2d');
        //初始化的树
        drawtree(ctx,300,470,100,-Math.PI / 2, 12, 12);
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20230601/e3291979b3e24a7997055a3ff2daf27b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 1]: /images/20230601/5e7d88ce588046838cdaf493a6bed672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 2]: /images/20230601/f1aa02baa2fa449a810677303b3a81dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 3]: /images/20230601/3a6a2c19753642a8aa72d84d229d7e31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70 4]: /images/20230601/cafb623f6ae24868a56f7cf6b2a6b2db.png