• HTML5 Canvas 绘制五角星


    代码:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>五角星</title>
        </head>
    
         <body onload="draw()">
            <canvas id="myCanvus" width="200px" height="200px" style="border:0px dashed black;">
                出现文字表示你的浏览器不支持HTML5
            </canvas>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        function draw(){
            var canvas=document.getElementById("myCanvus");
            var context=canvas.getContext("2d");
    
            context.fillStyle = "yellow";
            context.fillRect(0, 0, 200, 200);
    
            context.strokeStyle = "rgb(250,0,0)";
            context.fillStyle = "rgb(250,0,0)"
    
            context.beginPath();
            context.moveTo(100, 0);
            context.lineTo(100+Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
            context.lineTo(100-Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
            context.lineTo(100+Math.cos(Math.PI*1/10)*100, 100-Math.sin(Math.PI*1/10)*100);
            context.lineTo(100-Math.cos(Math.PI*3/10)*100, 100+Math.sin(Math.PI*3/10)*100);
            context.lineTo(100, 0);
            context.fill();
            context.stroke();
            context.closePath();
        }
    //-->
    </script>
  • 相关阅读:
    sprint2第一天任务完成情况
    第七天完成任务
    第六天任务情况
    第五天任务完成情况
    第四天任务完成情况
    第三天任务完成情况
    第二天任务完成情况
    第一天任务完成情况
    组队开发项目NABCD分析
    网络设置-指定ip
  • 原文地址:https://www.cnblogs.com/heyang78/p/7467450.html
Copyright © 2020-2023  润新知