<!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. CDM命令实现MySql数据库文件的导出导入

    1.首先进入MySQL的安装目录,找到Bin文件夹,我这里安装的目录是C:\Program Files\MySQL\MySQL Server 8.0\bin ,进入该文件夹后在空白处按下Shift键+ ...

  2. vagrant在windows下的安装和配置（二）

    在(一)中安装和配置好后 框框中的信息是登录vagrant up后的系统用的 我这里登录用的是xshell-----下载一个xshell然后安装 打开xshell 按确定之后生成一个新的会话,然后登录 ...

  3. Spring Boot 嵌入式Web容器

    目录 前言 1.起源 2.容器启动流程解析 2.1.获取应用类型 2.2.容器启动流程 3.加载 Web 容器工厂 4.总结 前言         最近在学习Spring Boot相关的课程,过程中以 ...

  4. 【ZooKeeper系列】3.ZooKeeper源码环境搭建

    前文阅读: [ZooKeeper系列]1.ZooKeeper单机版.伪集群和集群环境搭建 [ZooKeeper系列]2.用Java实现ZooKeeper API的调用 在系列的前两篇文章中,介绍了Zo ...

  5. Cocos Creator | 飞刀大乱斗开发教程系列（一）

    预览效果 具体内容 ■ 这一期,主要讲解主页下方列表选项如何实现.也就是游戏开始后,加载所有现有的英雄列表,这一功能的实现,如下图部分. ■ 列表使用 ScrollView 实现,横向滚动,设置好上下 ...

  6. 重新精读《Java 编程思想》系列之final关键字

    在java中final关键字标识无法被修改.接下来从final修饰数据.方法和类进行介绍. final数据 final用来告知编译器这一块数据是恒定不变的.数据恒定不变又如下作用: 1.一个永不改变的 ...

  7. The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone错误的解决办法【已解决】

    ---恢复内容开始--- The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time ...

  8. 前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

    本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 视频地址 文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角 ...

  9. Kubernetes 会不会“杀死” DevOps？

    作者丨孙健波(天元)  阿里巴巴技术专家 导读:DevOps 这个概念最早是在 2007 年提出的,那时云计算基础设施的概念也才刚刚提出没多久,而随着互联网的逐渐普及,应用软件的需求爆发式增长,软件开 ...

  10. 注解@ConfigurationProperties使用方法

    注解@ConfigurationProperties使用方法 前言 最近在思考使用java config的方式进行配置,java config是指基于java配置的spring.传统的Spring一般 ...