<!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. jQuery 工具类函数-检测两个节点的包含关系

    调用名为$.contains的工具函数,能检测在一个DOM节点中是否包含另外一个DOM节点,如果包含,返回true,否则,返回false值,调用格式为: $.contains (container, ...

  2. vue-learning：9-template-v-model

    表单元素的双向绑定指令v-model 目录 v-model的基础用法 v-model双向绑定实现的原理 v-model绑定值的输出类型(字符串.数组.布尔值.自定义) v-model修饰符:.lazy ...

  3. 布尔&list与条件循环语句与trutle

    布尔值与空值 布尔值: 一个布尔值只有True.False两种值 空值: 是python里一个特殊的值,用None表示.None不能理解为0.因为0是有意义的,而None是一个特殊值. list(列表 ...

  4. rabbitmq template发送的消息中，Date类型字段比当前时间晚了8小时

    前言 前一阵开发过程遇到的问题,用的rabbitmq template发送消息,消息body里的时间是比当前时间少了8小时的,这种一看就是时区问题了. 就说说为什么出现吧. 之前的配置是这样的: @B ...

  5. 2018-2-13-win10-uwp-模拟网页输入

    title author date CreateTime categories win10 uwp 模拟网页输入 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...

  6. mysql find_in_set 与 in 的用法与区别，mysql范围搜索，mysql范围查询

    mysql find_in_set 与 in 的用法与区别 1.find_in_set 用于模糊查询,并且数据库中的值是用英文逗号分隔的: 例如: (1).去字段中查询 select find_in_ ...

  7. 记springboot + MP +Hikari动态数据源配置

    环境准备: springboot 2.1.6 mybatis-plus 数据库驱动 boot 自带hikari驱动 步骤1:  导入多数据源启动工具类 <!-- 多数据源支持 -->< ...

  8. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  9. $CF559C\ Gerald\ and\ Fiant\ Chess$ 计数类$DP$

    AcWing Description 有个$H$行$W$列的棋盘,里面有$N$个黑色格子,求一个棋子由左上方格子走到右下方格子且不经过黑色格子的方案数. $1<=H,M<=1e5,1< ...

  10. Linux学习之路--常用配置

    1.修改IP地址 $vi /etc/sysconfig/network-scripts/ifcfg-eth0 BOOTPROTO=staticONBOOT=yesIPADDR=192.168.2.12 ...