zoukankan      html  css  js  c++  java
  • 画一个五角星

    <body>
    <canvas id="canvas"></canvas>
    <script>
    window.onload=function(){
    canvas=document.getElementById("canvas");
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext("2d")
    context.beginPath();
    for(var i=0;i<5;i++){
    context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
    -Math.sin((18+i*72)/180*Math.PI)*300+400
    );
    context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
    -Math.sin((54+i*72)/180*Math.PI)*150+400
    )

    }
    context.closePath();
    context.lineWidth=10;
    context.fillStyle="pink";
    context.stroke();
    context.fill()
    }
    </script>
    </body>
     函数化 (并让五角星顺时针旋转顺30度角)
    
    
    <body>
    <canvas id="canvas"></canvas>
    <script>
    window.onload=function(){
    canvas=document.getElementById("canvas");
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext("2d");
    draw(context,150,300,400,400,30)
    }

    function draw(ctx,r,R,x,y,rot){
    ctx.beginPath();
    for(var i=0;i<5;i++){
    ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
    -Math.sin((18+i*72-rot)/180*Math.PI)*R+y
    );
    ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
    -Math.sin((54+i*72-rot)/180*Math.PI)*r+y
    )

    }
    ctx.closePath();
    ctx.lineWidth=10;
    ctx.fillStyle="pink";
    ctx.stroke();
    ctx.fill();
    }
    </script>
    </body>
     
    
    
     
  • 相关阅读:
    「Vue」nrm
    「Vue」路由
    「Vue」父子组件之间的传值及调用方法
    「Vue」vue生命周期
    「Vue」自定义指令
    「Vue」自定义按键修饰符
    「Vue」过滤器
    常用断点设置
    BUUCTF 不一样的flag writeup
    好久没有写东西,最近在看逆向相关的东西,做点记录
  • 原文地址:https://www.cnblogs.com/yaomengli/p/8311016.html
Copyright © 2011-2022 走看看