代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>新西兰国旗</title>
  6.     </head>
  7.  
  8.      <body onload="draw()">
  9.         <canvas id="myCanvus" width="480px" height="240px" style="border:1px dashed black;">
  10.             出现文字表示你的浏览器不支持HTML5
  11.         </canvas>
  12.      </body>
  13. </html>
  14. <script type="text/javascript">
  15. <!--
  16.     function draw(){
  17.         var canvas=document.getElementById("myCanvus");
  18.         var canvasWidth=240;
  19.         var canvasHeight=120;
  20.  
  21.         var context=canvas.getContext("2d");
  22.  
  23.         context.fillStyle = "white";
  24.         context.fillRect(0, 0, canvasWidth*2, canvasHeight*2);
  25.  
  26.         // 先画角上蓝色方块
  27.         context.fillStyle = "blue";
  28.         context.fillRect(0, 0, 100, 40);
  29.         context.fillRect(140, 0, 100, 40);
  30.         context.fillRect(0, 80, 100, 40);
  31.         context.fillRect(140, 80, 100, 40);
  32.  
  33.         // 用旋转的白色长条去盖上蓝色方块,覆盖完出现八个三角块
  34.         context.save();
  35.         context.translate(120,60);
  36.         context.rotate(getRad(26.56));
  37.         context.fillStyle = "white";
  38.         context.fillRect(-300, -12, 600, 24);
  39.         context.restore();
  40.  
  41.         context.save();
  42.         context.translate(120,60);
  43.         context.rotate(getRad(-26.56));
  44.         context.fillStyle = "white";
  45.         context.fillRect(-300, -12, 600, 24);
  46.         context.restore();
  47.  
  48.         // 四个红条
  49.         context.save();
  50.         context.translate(120,60);
  51.         context.rotate(getRad(26.56));
  52.         context.fillStyle = "red";
  53.         context.fillRect(-300, 0, 300, 8);
  54.         context.restore();
  55.  
  56.         context.save();
  57.         context.translate(120,60);
  58.         context.rotate(getRad(-26.56));
  59.         context.fillStyle = "red";
  60.         context.fillRect(-300, 0, 300, 8);
  61.         context.restore();
  62.  
  63.         context.save();
  64.         context.translate(120,60);
  65.         context.rotate(getRad(-26.56));
  66.         context.fillStyle = "red";
  67.         context.fillRect(0, -8, 300, 8);
  68.         context.restore();
  69.  
  70.         context.save();
  71.         context.translate(120,60);
  72.         context.rotate(getRad(26.56));
  73.         context.fillStyle = "red";
  74.         context.fillRect(0, -8, 300, 8);
  75.         context.restore();
  76.  
  77.         // 用一个白条去把中间部分的多余红边去掉
  78.         context.fillStyle = "white";
  79.         context.fillRect(0, 40, 240, 40);
  80.  
  81.         // 画中间的红色十字
  82.         context.fillStyle = "red";
  83.         context.fillRect(0, 48, 240, 24);
  84.         context.fillRect(108, 0, 24, 120);
  85.  
  86.         // 用蓝色方块覆盖掉多出来的部分
  87.         context.fillStyle = "blue";
  88.         context.fillRect(0, canvasHeight, canvasWidth*2, canvasHeight);
  89.         context.fillRect(canvasWidth, 0, canvasWidth, canvasHeight);
  90.  
  91.         // 逐个画南十字星的四颗星
  92.  
  93.         // 第一颗星
  94.         var x=360;
  95.         var y=45;
  96.         context.save();
  97.         var r=14;
  98.         context.translate(x-r,y-r);
  99.         context.strokeStyle = "white";
  100.         context.fillStyle = "white";
  101.         context.beginPath();
  102.         context.moveTo(r, 0);
  103.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  104.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  105.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  106.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  107.         context.lineTo(r, 0);
  108.         context.fill();
  109.         context.stroke();
  110.         context.closePath();
  111.         context.restore();
  112.  
  113.         context.save();
  114.         r=10;
  115.         context.translate(x-r,y-r);
  116.         context.strokeStyle = "red";
  117.         context.fillStyle = "red";
  118.         context.beginPath();
  119.         context.moveTo(r, 0);
  120.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  121.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  122.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  123.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  124.         context.lineTo(r, 0);
  125.         context.fill();
  126.         context.stroke();
  127.         context.closePath();
  128.         context.restore();
  129.  
  130.         // 第二颗星
  131.         var x=360;
  132.         var y=200;
  133.         context.save();
  134.         var r=14;
  135.         context.translate(x-r,y-r);
  136.         context.strokeStyle = "white";
  137.         context.fillStyle = "white";
  138.         context.beginPath();
  139.         context.moveTo(r, 0);
  140.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  141.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  142.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  143.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  144.         context.lineTo(r, 0);
  145.         context.fill();
  146.         context.stroke();
  147.         context.closePath();
  148.         context.restore();
  149.  
  150.         context.save();
  151.         r=10;
  152.         context.translate(x-r,y-r);
  153.         context.strokeStyle = "red";
  154.         context.fillStyle = "red";
  155.         context.beginPath();
  156.         context.moveTo(r, 0);
  157.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  158.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  159.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  160.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  161.         context.lineTo(r, 0);
  162.         context.fill();
  163.         context.stroke();
  164.         context.closePath();
  165.         context.restore();
  166.  
  167.         // 第三颗星
  168.         var x=300;
  169.         var y=110;
  170.         context.save();
  171.         var r=14;
  172.         context.translate(x-r,y-r);
  173.         context.strokeStyle = "white";
  174.         context.fillStyle = "white";
  175.         context.beginPath();
  176.         context.moveTo(r, 0);
  177.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  178.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  179.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  180.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  181.         context.lineTo(r, 0);
  182.         context.fill();
  183.         context.stroke();
  184.         context.closePath();
  185.         context.restore();
  186.  
  187.         context.save();
  188.         r=10;
  189.         context.translate(x-r,y-r);
  190.         context.strokeStyle = "red";
  191.         context.fillStyle = "red";
  192.         context.beginPath();
  193.         context.moveTo(r, 0);
  194.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  195.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  196.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  197.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  198.         context.lineTo(r, 0);
  199.         context.fill();
  200.         context.stroke();
  201.         context.closePath();
  202.         context.restore();
  203.  
  204.         // 第四颗星
  205.         var x=420;
  206.         var y=100;
  207.         context.save();
  208.         var r=14;
  209.         context.translate(x-r,y-r);
  210.         context.strokeStyle = "white";
  211.         context.fillStyle = "white";
  212.         context.beginPath();
  213.         context.moveTo(r, 0);
  214.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  215.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  216.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  217.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  218.         context.lineTo(r, 0);
  219.         context.fill();
  220.         context.stroke();
  221.         context.closePath();
  222.         context.restore();
  223.  
  224.         context.save();
  225.         r=10;
  226.         context.translate(x-r,y-r);
  227.         context.strokeStyle = "red";
  228.         context.fillStyle = "red";
  229.         context.beginPath();
  230.         context.moveTo(r, 0);
  231.         context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  232.         context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  233.         context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r);
  234.         context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r);
  235.         context.lineTo(r, 0);
  236.         context.fill();
  237.         context.stroke();
  238.         context.closePath();
  239.         context.restore();
  240.     }
  241.  
  242.     function getRad(degree){
  243.         return degree/180*Math.PI;
  244.     }
  245. //-->
  246. </script>

HTML5 Canvas 绘制新西兰国旗的更多相关文章

  1. HTML5 Canvas 绘制澳大利亚国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  2. HTML5 Canvas 绘制英国国旗

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

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

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

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

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

  5. 使用html5 canvas绘制图片

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

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

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

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

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

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

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

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

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

随机推荐

  1. Linux下测试SSD固态硬盘写入速度

    最近买了一个256GB的SSD固态硬盘,想测试一下写入速度,于是如下操作. 部分代码: gettimeofday(&start, NULL); int fd = open("test ...

  2. [oldboy-django][6其他]备份数据库和导入数据库

    # 备份数据库 - 简单备份 mysqldump -uroot -pec494904 ecmangent-mobile > /tmp/backfile.sql 表结构+数据 - --opt my ...

  3. [oldboy-django][5python基础][高级特性]Iterator迭代器

    # 区分可迭代对象iterable, 迭代器iterator, 生成器generator a. iterable 可直接用for循环的对象,都称为可迭代对象, from collections imp ...

  4. [oldboy-django][1初识django]创建虚拟（干净）的Python环境

    如果应用A需要jinja 2.7,而应用B需要jinja 2.6怎么办?此时可以针对不同应用创建不同的虚拟环境. 这种情况下,每个应用可能需要各自拥有一套“独立”的Python运行环境.virtual ...

  5. 软工实践第八次作业——UML设计

    本次作业博客 团队组成 临时组长:何裕捷 组员:蔡子阳,陈德斌,胡青元,李麒,高裕翔,王焕仁,黄培鑫 UML 用例图 描述的部分: 1 这里是用户个人管理系统的用例图 面临的问题: 1 面临用户登录注 ...

  6. line-height与vertical-align

    css世界读书笔记: 内联元素与流 块级元素负责结构,内联元素接管内容 x元素的下边缘就是我们的基线baseline x-height就是x的高度 vertical-align:middle是x中点位 ...

  7. [UOJ#132][BZOJ4200][luogu_P2304][NOI2015]小园丁与老司机

    [UOJ#132][BZOJ4200][luogu_P2304][NOI2015]小园丁与老司机 试题描述 小园丁 Mr. S 负责看管一片田野,田野可以看作一个二维平面.田野上有 \(n\) 棵许愿 ...

  8. MacPro 系统空间竟占90G，如何清理--OmniDiskSweeper

    MacPro 经常提示我磁盘空间已满,管理磁盘空间. 然后我就管理了一下,发现系统竟占90个G,有点懵逼.然后网上查了资料,发现这个超级好用的工具OmniDiskSweeper. 打开是这样的! 然后 ...

  9. DOS的一些常用命令

    原文发布时间为:2011-02-12 -- 来源于本人的百度文章 [由搬家工具导入] DOS远程桌面连接命令 mstsc /v: 192.168.1.250 /console cmd        运 ...

  10. 从头实现一个koa框架

    koajs是最流行的nodejs后端框架之一,有很多网站都使用koa进行开发,同时社区也涌现出了一大批基于koa封装的企业级框架.然而,在这些亮眼的成绩背后,作为核心引擎的koa代码库本身,却非常的精 ...