<!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 如何调试某个文件是哪个代码创建

    我发现了自己的软件,会在桌面创建一个 1.txt 文件,但是我不知道是哪个代码创建的,那么如何进行快速的调试找到是哪个代码创建的 最简单的方法是使用 VisualStudio 全局搜 1.txt 看是 ...

  2. ZOJ——Knight Moves(bfs)

    Knight Moves Time Limit: 2 Seconds      Memory Limit: 65536 KB A friend of you is doing research on ...

  3. 再也不学Threadlocal了，看这一篇就忘不掉了（万字总结）

    为什么要学习ThreadLocal呢?因为面试官经常问,而且在线程中使用它可以给我们提供一个线程内的本地局部变量,这样就可以减少在一个线程中因为多函数之间的操作导致共享变量传值的复杂性,说白了,我们使 ...

  4. no supported authentication methods avaiable

    在git(小乌龟)向github远程推送(push)文件是会报一个异常 no supported authentication methods avaiable 解决方法:因为git(小乌龟)和Git ...

  5. Serverless 实战 —— Funcraft + OSS + ROS 进行 CI/CD

    前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数计算准 ...

  6. 聊聊Python中的描述符

    描述符是实现描述符协议方法的Python对象,当将其作为其他对象的属性进行访问时,该描述符使您能够创建具有特殊行为的对象. 通常,描述符是具有“绑定行为”的对象属性,其属性访问已被描述符协议中的方法所 ...

  7. 1057 数零壹 (20 分)C语言

    给定一串长度不超过 10^​5的字符串,本题要求你将其中所有英文字母的序号(字母 a-z 对应序号 1-26,不分大小写)相加,得到整数 N,然后再分析一下 N 的二进制表示中有多少 0.多少 1.例 ...

  8. Prometheus基础应用

    简介 Prometheus使用扫盲,包含基础的概念和操作说明,基于官网和个人测试. versoin: 2.14 官网 GitHub 安装 prometheus安装运行非常方便,下载后解压,运行根目录下 ...

  9. hadoop传递参数方法总结

    转自:http://blog.csdn.net/xichenguan/article/details/22162813 写MapReduce程序通常要传递各种各样的参数,选择合适的方式来传递参数既能提 ...

  10. Theia APIs——通过JSON-RPC进行通信

    上一篇:Theia APIs——事件 通过JSON-PRC进行通信 在本节中,我将讲解如何创建后端服务并通过JSON-PRC来连接它. 我将使用debug logging system作为例子来进行讲 ...