代码：

<!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="380px" height="200px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var canvasWidth=380;
        var canvasHeight=200;

        var context=canvas.getContext("2d");

        context.fillStyle = "white";
        context.fillRect(0, 0, canvasWidth, canvasHeight);

        var i;
        // 13个横条
        for(i=0;i<13;i++){
            if(i % 2==0){
                context.fillStyle = "red";
                context.fillRect(0, canvasHeight/13*i, canvasWidth, canvasHeight/13);
            }else{
                context.fillStyle = "white";
                context.fillRect(0, canvasHeight/13*i, canvasWidth, canvasHeight/13);
            }
        }

        // 左上角蓝底
        var D=canvasWidth/5*2;
        var C=canvasHeight/13*7;
        context.fillStyle = "blue";
        context.fillRect(0, 0, D, C);

        // 画星星
        var x;
        var y;
        var j=0;

        context.strokeStyle = "white";
        context.fillStyle = "white"

        for(i=0;i<6;i++){
            for(j=0;j<5;j++){
                x=D/12+2*i*D/12;
                y=C/10+2*j*C/10;

                context.save();

                var r=5;
                context.translate(x-r,y-r);

                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();
            }
        }

        for(i=0;i<5;i++){
            for(j=0;j<4;j++){
                x=D/6+2*i*D/12;
                y=C/5+2*j*C/10;

                context.save();

                var r=5;
                context.translate(x-r,y-r);

                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();
            }
        }
    }

    function getRad(degree){
        return degree/180*Math.PI;
    }
//-->
</script>

关于美国国旗如何画请参考：https://wenku.baidu.com/view/d6eb1d40b4daa58da1114a32.html

HTML5 Canvas 绘制星条旗的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. HDU3018 几笔画（非1笔）

    Ant Trip Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  2. 玲珑杯”ACM比赛 Round #15

    手速狗从西安回来一只浑浑噩噩,好不容易迎来一场送饭比赛体验一把河南的优势,结果被高中生狂虐,无缘奖金..我的奖品梦就这样一次次被打破.... A -- Reverse the lights 最后半小时 ...

  3. FreeBSD利用 ports 來安裝軟體

    FreeBSD利用 ports 來安裝軟體   利用 ports 來安裝軟體 FreeBSD 的 ports 就是別人已經編譯過,安裝測試沒問題了,他們將軟體編譯時所需的組態設定.編譯程序及安裝程序, ...

  4. 【bzoj3119】Book

    小清新题,有手有笔就能做出来了…… 先把 $b$ 取相反数,这样写加法好看. 设 $x,y$,使得 $ax+by=m-np$(其实是懒得想文字定义了),该方程与 $x+y=\frac{n(n-1)}{ ...

  5. 关于ofbiz13.07和ofbiz14.12部署的问题解决方法

    必备软件 Jdk7 文件名:java_ee_sdk-6u4-jdk7-windows.exe eclipse MySQL Installer 5.6 for Windows MySql Connect ...

  6. pat 甲级 1064. Complete Binary Search Tree (30)

    1064. Complete Binary Search Tree (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  7. 【转】linux之shfit

    位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...

  8. 洛谷 P1072 Hankson 的趣味题

    题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现 在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲 ...

  9. SQLServer Split

    ALTER FUNCTION dbo.splitl ( @String VARCHAR(MAX), @Delimiter VARCHAR(MAX) ) RETURNS @temptable TABLE ...

  10. [LeetCode] Populating Next Right Pointers in Each Node 深度搜索

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...