Canvas-动态绘制六边形（多个六边形）

朱雀 2022-04-03 09:16 487阅读 0赞

做了一个鼠标滑过框自动绘制六边形：  
代码案例：

<!DOCTYPE html>
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<title>canvas</title>
    </head>
    <body>
    <canvas id="canvas" class="canvas" width="132" height="156" style="border:1px solid #000;"></canvas>
    <canvas id="canvas2" class="canvas" width="132" height="156" style="border:1px solid #000;"></canvas>
    
    <script type="text/javascript">
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    
    var canvas2 = document.getElementsByTagName("canvas")[1];
    var context2 = canvas2.getContext("2d");
    
    
    var offset;
    var flag = true;
    
    var offset2;
    var flag2 = true;
    
    function animate() {
        var myAnimation = requestAnimationFrame(animate);
    
        offset += (flag === true) ? 10 : -10;
    
        if (offset >= 0) {
            offset = 0;
        }
        if (offset <= -600) {
            offset = -600
            cancelAnimationFrame(myAnimation);
        }
    
        canvas.height = 156;
    
        context.strokeStyle = "#000";
    	
        context.moveTo(66, 156);
        context.lineTo(132, 104);
        context.lineTo(132, 52);
    	
        context.lineTo(66, 0);
        context.lineTo(0, 52);
        context.lineTo(0, 104);
        context.closePath();
        context.setLineDash([600, 600]);
        context.lineDashOffset = -offset;
        context.stroke();
    }
    function animate2() {
        var myAnimation2 = requestAnimationFrame(animate2);
    
        offset2 += (flag2 === true) ? 10 : -10;
    
        if (offset2 >= 0) {
            offset2 = 0;
        }
        if (offset2 <= -600) {
            offset2 = -600
            cancelAnimationFrame(myAnimation2);
        }
    
        canvas2.height = 156;
    
        context2.strokeStyle = "#000";
    	
        context2.moveTo(66, 156);
        context2.lineTo(132, 104);
        context2.lineTo(132, 52);
    	
        context2.lineTo(66, 0);
        context2.lineTo(0, 52);
        context2.lineTo(0, 104);
        context2.closePath();
        context2.setLineDash([600, 600]);
        context2.lineDashOffset = -offset2;
        context2.stroke();
    }
    canvas.addEventListener('mouseenter', function() {
        offset = -600;
        flag = true
        animate();
    })
    
    canvas.addEventListener('mouseleave', function() {
        flag = false;
    
    })
    canvas2.addEventListener('mouseenter', function() {
        offset2 = -600;
        flag2 = true
        animate2();
    })
    canvas2.addEventListener('mouseleave', function() {
        flag2 = false;
    
    })
    </script>
    </body></html>

效果展示：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70]: /images/20220403/f82116d6aeeb402098e49db3b2ea0110.png