<!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. 【35.12%】【POJ 1988】Cube Stacking

    Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 24007 Accepted: 8432 Case Time Limit: 100 ...

  2. 【23.91%】【hdu 4694】Important Sisters("支NMLGB配树"后记)(支配树代码详解)

    Time Limit: 7000/7000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submission( ...

  3. filter 开发

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  4. Visioi形状相关应用

    选择手柄为白点  按住shift的同时移动白点更为灵活 黄色的点就是控制手柄(只有一维图形有) 当调整形状出现绿色边的时候说明:这个时候这个形状的边等于了某个形状的长 铅笔工具可以移动控制点来更形状 ...

  5. jsp中点击一个图片跳转到另一个页面的方法

    1.这是jsp页面中的关于图片的那段代码 <img src="images/tj1.png " id="tj1"></img> 2.跳转 ...

  6. 洛谷$P1345\ [USACO5.4]$ 奶牛的电信$Telecowmunication$ 网络流

    正解:最小割 解题报告: 传送门$QwQ$ $QwQ$好久没做网络流了来复健下. 这个一看就很最小割趴?考虑咋建图?就把点拆成边权为$1$的边,然后原有的边因为不能割所以边权为$inf$. 然后跑个最 ...

  7. $NIM$游戏小总结

    $umm$可能之后会写个博弈论总结然后就直接把这个复制粘贴上去就把这个删了 但因为还没学完所以先随便写个$NIM$游戏总结趴$QAQ$ 首先最基础的$NIM$游戏:有$n$堆石子,每次可以从一堆中取若 ...

  8. .net core试水

    概述 大概记录下我如何第一次使用.net core搭建一个api,由于最近.net core比较火,我也尝试着使用.net core做了一个小功能 本文主要包括 1.环境配置 2.程序编写 3.程序部 ...

  9. 1038 统计同成绩学生 (20 分)C语言

    题目描述 本题要求读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入描述: 输入在第1行给出不超过105的正整数N,即学生总人数.随后1行给出N名学生的百分制整数成绩,中间以空格分隔.最后1 ...

  10. C# 启动 a Python Web Server with Flask

    概览 最近有个需求是通过c#代码来启动python 脚本.嘿~嘿!!! 突发奇想~~既然可以启动python脚本,那也能启动flask,于是开始着手操作. 先看一波gif图 通过打开控制台启动flas ...