<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         #flag{

             width: 600px;

             height: 400px;

             background-color: #DE2910;

         }

     </style>

 </head>

 <body align="center">

     <canvas id="flag" width=600 height="400"></canvas>

     <script>

         var flag=document.getElementById("flag");

         var ctx=flag.getContext('2d');

         function drawStar(x,y,r,deg){//xy中心坐标，r半径，deg旋转角度

             ctx.beginPath();

             ctx.translate(x,y);

             ctx.rotate(deg*Math.PI/180);

             var dit = Math.PI * 4 / 5;

             var sin = Math.sin(0) * r;

             var cos = Math.cos(0) * r;

             ctx.moveTo(cos, sin);

             for (var i = 0; i < 5; i++) {

                 var tempDit = dit * i;

                 sin = Math.sin(tempDit) * r;

                 cos = Math.cos(tempDit) * r;

                 ctx.lineTo(cos, sin);

             }

             ctx.closePath();

             ctx.fillStyle = "#ffde00";

             ctx.fill();

             ctx.rotate(-deg*Math.PI/180);

             ctx.translate(-x,-y);

         }

         drawStar(100,100,60,-18);

         drawStar(200,40,20,0);

         drawStar(240,80,20,27);

         drawStar(240,140,20,-18);

         drawStar(200,180,20,0);

     </script>

 </body>

 </html>

用canvas绘制标准的五星红旗的更多相关文章

  1. HTML5 canvas 绘制五星红旗

    这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...

  2. canvas绘制五星红旗

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

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

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

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

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

  6. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  7. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  8. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. dotnet 使用 System.CommandLine 写命令行程序

    在写命令行程序的时候,会遇到命令行解析的问题,以及参数的使用和规范化等坑.现在社区开源了命令行项目,可以帮助小伙伴快速开发命令行程序,支持自动的命令行解析和规范的参数 我写过一篇关于命令行解析的博客C ...

  2. 009 Ceph RBD增量备份与恢复

    一.RBD的导入导出介绍 Ceph存储可以利用快照做数据恢复,但是快照依赖于底层的存储系统没有被破坏 可以利用rbd的导入导出功能将快照导出备份 RBD导出功能可以基于快照实现增量导出 二.RBD导出 ...

  3. xshell连接不上ubuntu---could not connect to 'ip' (port 22): Connection failed.

    可能是没有开启ssh server,接下来就是开启服务就好.命令如下: sudo apt-get install openssh-server 这样就OK啦

  4. ES6学习之二

    本文的学习来自技术胖大神的教程:https://jspang.com/ 1扩展运算符和rest运算符 扩展运算符和rest运算符,它们都是…(三个点). 它们有很多相似之处,甚至很多时候不用特意去区分 ...

  5. redis集群数据迁移

    redis集群数据备份迁移方案 n  迁移环境描述及分析 当前我们面临的数据迁移环境是:集群->集群. 源集群: 源集群为6节点,3主3备 主 备 192.168.112.33:8001 192 ...

  6. 洛谷$P$3160 局部极小值 $[CQOI2012]$ 状压$dp$

    正解:状压$dp$ 解题报告: 传送门! 什么神仙题昂,,,反正我是没有想到$dp$的呢$kk$,,,还是太菜了$QAQ$ 首先看数据范围,一个4×7的方格,不难想到最多有8个局部极小值,过于显然懒得 ...

  7. 【一起学源码-微服务】Nexflix Eureka 源码四：EurekaServer启动之完成上下文构建及EurekaServer总结

    前言 上篇文章已经介绍了 Eureka Server上下文创建相关的Eureka Client逻辑,这一部分还是比较复杂的.接下来就讲解下Eureka Server上下文初始化最后的部分,然后加上整个 ...

  8. 超详细Node安装教程

    今天周末休息,我制定了我的2020年度规划,其中包含编写50篇养成写博文的习惯.算下来平均每周一篇,感觉也不是很难,但我的写作能力不是很好,争取一次比一次好!希望自己能够坚持下去.2020为自己而活, ...

  9. 软考网络工程师、软件设计师等官方指定教材pdf文件

    软考计算机网络工程师教材pdf 链接:https://pan.baidu.com/s/1-UXeNye414UWYxYRC6bHuA 提取码:5z9w 软考计算机软件设计师第五版pdf 链接:http ...

  10. 小小知识点（二十五）5G关键技术——Massive MIMO(大规模天线阵列)和beamforming（波束成形）

    转自http://www.elecfans.com/d/949864.html 多输入多输出技术(Multiple-Input Multiple-Output,MIMO)是指在发射端和接收端分别使用多 ...