zoukankan      html  css  js  c++  java
  • 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="300px" height="200px" style="border:1px dashed black;">
                出现文字表示你的浏览器不支持HTML5
            </canvas>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        function draw(){
            var canvas=document.getElementById("myCanvus");
            var context=canvas.getContext("2d");
    
            context.fillStyle = "red";
            context.fillRect(0, 0, 300, 200);
            
            context.strokeStyle = "yellow";
            context.fillStyle = "yellow"
            var r;
    
            context.save();
    
            context.translate(25,25);
    
            r=30;
            context.beginPath();
            context.moveTo(r, 0);
            context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r, 0);
            context.fill();
            context.stroke();
            context.closePath();
    
            context.restore();
    
            context.save();
            context.translate(100,10);
            r=10;
            context.beginPath();
            context.moveTo(r, 0);
            context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r, 0);
            context.fill();
            context.stroke();
            context.closePath();
    
            context.restore();
    
            context.save();
            context.translate(120,30);
            r=10;
            context.beginPath();
            context.moveTo(r, 0);
            context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r, 0);
            context.fill();
            context.stroke();
            context.closePath();
    
            context.restore();
    
            context.save();
            context.translate(120,60);
            r=10;
            context.beginPath();
            context.moveTo(r, 0);
            context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r, 0);
            context.fill();
            context.stroke();
            context.closePath();
    
            context.restore();
    
            context.save();
            context.translate(100,80);
            r=10;
            context.beginPath();
            context.moveTo(r, 0);
            context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
            context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
            context.lineTo(r, 0);
            context.fill();
            context.stroke();
            context.closePath();
        }
    
        function getRad(degree){
            return degree/180*Math.PI;
        }
    //-->
    </script>

    如何画五星红旗请参考:https://jingyan.baidu.com/article/8065f87f93b64123312498e8.html

  • 相关阅读:
    详细了解SQLITE 优缺点 性能测试
    特例 FOR 循环
    java获得CPU使用率,系统内存,虚拟…
    中国历史表
    java&nbsp;内部类
    JAVA&nbsp;修饰符
    ubuntu android 命令环境下操作sqlite
    ANDROID 绝对布局 相对布局 Linear…
    JAVA 取系统当前日期 少8个小时
    linux 根目录下的子目录的意义
  • 原文地址:https://www.cnblogs.com/heyang78/p/7470054.html
Copyright © 2011-2022 走看看