H5 realization draw a triangle and its three vertices draw three circles to add click event

1. The results are as follows:

code show as below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script type="text/javascript">
        //获取canvas容器
        var can = document.getElementById('canvas');
        // Create a canvas 
        var CTX = can.getContext ( ' 2D ' );
         // draw a triangle (x1, x2), (x2 , y2) (x3, y3) represents the coordinates of three points of a triangle, color indicates the color, type indicates drawing type (not filled and filled fill Stroke) 
        var draw =  function (X1, Y1, X2, Y2, X3, Y3, Color, type) {
            ctx.beginPath ();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x3, y3);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        }
        Draw ( 100 , 100 , 175 , 20 is , 280 , 100 , ' Green ' , ' Stroke ' )
         // draw a circle (x, y) coordinates of the center, r represents a radius, start angle indicates the start, end indicating the end of the angle, color indicates the color, type indicates the type of drawing (not filled and filled fill Stroke) 
        var draw =  function (X, Y, R & lt, Start, End, color, type) {
             var Unit = Math.PI /  180 [ ;
            ctx.beginPath ();
            ctx.arc(x, y, r, start * unit, end * unit);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        }
        draw(175,20,20,0,360,'yellow','fill')
        
        var draw = function(x, y, r, start, end, color, type) {
            var unit = Math.PI / 180;
            ctx.beginPath ();
            ctx.arc(x, y, r, start * unit, end * unit);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        }
        draw(100,100,20,0,360,'yellow','fill')
        
        var draw = function(x, y, r, start, end, color, type) {
            var unit = Math.PI / 180;
            ctx.beginPath ();
            ctx.arc(x, y, r, start * unit, end * unit);
            ctx[type + 'Style'] = color;
            ctx.closePath();
            ctx[type]();
        }
        draw(280,100,20,0,360,'yellow','fill')
        
        can.onclick = function (E) {
             // Get the mouse position 
            var X = e.clientX - can.offsetLeft;
             var Y = e.clientY - can.offsetTop;
             // by determining whether the mouse in the center of the inner circle range 
            IF ( X > = 80 && X <= 120 && Y > = 80 && Y <= 120 )
            {
                window.open('https://www.baidu.com');
            }
        }
    </script>
</html>

2. Supplementary: Videos with border triangle whose effect is as follows:

code show as below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .circle {
            width: 50px;
            height: 50px;
            border-radius: 150px;
            position: absolute;
            left: 230px;
            top:80px;
            background: yellow;
        }

        .circle1 {
            width: 50px;
            height: 50px;
            border-radius: 150px;
            position: absolute;
            left: 180px;
            top:220px;
            background: yellow;
        }

        .circle2 {
            width: 50px;
            height: 50px;
            border-radius: 150px;
            position: absolute;
            left: 380px;
            top:220px;
            background: yellow;
            
        }

        .triangle {
            width: 0;
            height: 0;
            border-bottom: 150px solid red;
            border-right: 150px solid transparent;
            border-left: 50px solid transparent;
            margin-left: 200px;
            margin-top: 100px;
        }
    </style>
    <body>
        <div class="triangle">
        <div class="circle"></div>
        <div class="circle1"></div>
        <div class="circle2"></div>
        </div>
    </body>
</html>

H5 realization draw a triangle and its three vertices draw three circles to add click event

Guess you like