代码改变世界

旋转3角形

2020-09-09 17:38  qgbo  阅读(126)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    * {
margin: 0;
padding: 0;
border: 0;
font-size: 0;
    }
</style>

</head>
<body >
    <div>

        <canvas id="myCanvas1"  >
        您的浏览器不支持Canvas，请升级浏览器
      </canvas>

      <canvas id="myCanvas2" style="position: relative;left: -13.4px;">
        您的浏览器不支持Canvas，请升级浏览器
      </canvas>

      <canvas id="myCanvas3" style="position: relative;left: -26.8px;">
        您的浏览器不支持Canvas，请升级浏览器
      </canvas>
    </div>
    

    <input type="range" id="slider" min="-300" max="300" step="0.8" value="0" oninput="change()" οnchange="change()" />

    <script>

        var r=50;


       var c1=  canvas('myCanvas1');
       var c2=  canvas('myCanvas2');
       var c3=  canvas('myCanvas3');

        function change(){
            var value =document.getElementById("slider").value;
        //将信息显示
    
        console.log(value);

        c1.style.webkitTransform = 'rotate('+value+'deg)';
        c2.style.webkitTransform = 'rotate('+value+'deg)';
        c3.style.webkitTransform = 'rotate('+value+'deg)';

        }

        function canvas(c){
        var canv = document.getElementById(c);
        var ctx1 = canv.getContext('2d');  //
        ctx1.canvas.width = 2*r; //js获取宽高
        ctx1.canvas.height = 2*r;
    


        ctx1.beginPath();
        ctx1.moveTo(r, 0);   //起点

        ctx1.lineTo(r-(r/2)*1.732, r+r/2);    // 0.268
        ctx1.lineTo(r+(r/2)*1.732, r+r/2);  
        ctx1.lineTo(r, 0); 
        ctx1.stroke();

        ctx1.beginPath();
     
        ctx1.arc(r, r, r, 0, Math.PI * 2, true);
        ctx1.closePath();
        ctx1.stroke();

        return canv;
        }

    </script>

</body>
</html>