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

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>canvas 绘制五星红旗</title>

</head>

<body>

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000"></canvas>

<script type="text/javascript">

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        var width=c.width;

        var height=width*2/3;

        ctx.fillStyle="red";

        ctx.fillRect(0,0,width,height);

        var maxR=0.15,minR=0.05;        //0.15大五角星的半径，0.05小五角星的半径

        var maxX=0.25,maxY=0.25;        //大五角星的位置

        var minX=[0.50,0.60,0.60,0.50];        //小五角星的X坐标

        var minY=[0.10,0.20,0.35,0.45];        //小五角星的Y坐标

        var ox=height*maxX,oy=height*maxY;        //大五角星的中心坐标

        drawStar(ctx,ox,oy,height*maxR,"#ff0",0);        //绘制五角星

        for (var idx = 0; idx < 4; idx++) {

                var  sx = minX[idx] * height, sy = minY[idx] * height;

                var  theta = Math.atan((oy - sy)/(ox - sx));

                drawStar(ctx,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);

         }

         /*五角星的坐标为（sx,sy）,半径为radius,rotate为0时一个顶点在对称轴上*/

         /*rotate:绕对称轴旋转rotate弧度*/

        function drawStar(ctx,sx,sy,radius,color,rotate){

                ctx.save();

                ctx.fillStyle=color;

                ctx.translate(sx,sy);                //移动坐标原点

                ctx.rotate(Math.PI+rotate);                //Math.PI等于圆周率3.14

                ctx.beginPath();

                //360度分成5份，2/5*PI,但底下是PI/5*4,那就想想平时是怎么画五角星的

                var dig=Math.PI/5*4;

                for(var i=0;i<5;i++){                //画五角星的五条长边

                        var x=Math.sin(i*dig);        //点的x坐标

                        var y=Math.cos(i*dig);        //点的y坐标

                        ctx.lineTo(x*radius,y*radius);

                }

                ctx.closePath();

                ctx.stroke();

                ctx.fill();

                ctx.restore();

        }

</script>

</body>

</html>

HTML5 canvas 绘制五星红旗的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

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

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

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

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

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

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. canvas绘制五星红旗

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

随机推荐

  1. Milking Grid

    poj2185:http://poj.org/problem?id=2185 题意:在一个字符矩阵中,找一个最小的字符子矩阵,使其能够覆盖整个矩阵. 题解:在KMP中i-next[i]是这能够覆盖这个 ...

  2. 由“Beeline连接HiveServer2后如何使用指定的队列（Yarn）运行Hive SQL语句”引发的一系列思考

    背景   我们使用的HiveServer2的版本为0.13.1-cdh5.3.2,目前的任务使用Hive SQL构建,分为两种类型:手动任务(临时分析需求).调度任务(常规分析需求),两者均通过我们的 ...

  3. C# .NET开发Oracle数据库应用程序

    .NET Framework访问Oracle数据库至少有两种方式,一种是利用微软提供的ADO.NET,另一种是利用Oracle提供的ODP.NET. 安装VS的时候会附带ADO.NET,安装Oracl ...

  4. QR分解

        从矩阵分解的角度来看,LU和Cholesky分解目标在于将矩阵转化为三角矩阵的乘积,所以在LAPACK种对应的名称是trf(Triangular Factorization).QR分解的目的在 ...

  5. Python 列表(list)、字典(dict)、字符串(string)常用基本操作小结

    创建列表 sample_list = ['a',1,('a','b')] Python 列表操作 sample_list = ['a','b',0,1,3] 得到列表中的某一个值 value_star ...

  6. ubuntu eclipse CDT 问题

    问题一:ubuntu eclipse c++ launch failed binary not found 解决:建完项目后 查看在项目中是不是有debug目录,说明没有编译.仅仅是须要做例如以下操作 ...

  7. UIKit和Core Graphics绘图（一）——字符串，线条，矩形，渐变

    概述 CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图.Core Graphics是高度集成于UIView和其他UIKit部分的.Core Gr ...

  8. gzip优化网络传输量提高传输效率[转]

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.IO;us ...

  9. jboss学习 - vfs---转载

    jboss的VFS是为了解决什么问题,他为什么有用呢 在jboss中有很多类似的资源操作的代码都分散在程序的各个地方,大多数情况下代码首先确定操作的资源的类型,比如是文件或者是文件夹,通过URL加载的 ...

  10. 最全的C#图片处理帮助类ImageHelper

    最全的C#图片处理帮助类ImageHelper.cs 方法介绍: 生成缩略图 图片水印处理方法 图片水印位置处理方法 文字水印处理方法 文字水印位置的方法 调整光暗 反色处理 浮雕处理 拉伸图片 滤色 ...