代码



<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

</head>

<body>

  <canvas id="canvas" width="600" height="400"></canvas>

  <script>

    var canvas = document.getElementById('canvas');

    var ctx = canvas.getContext('2d');

    // 绘制背景

    var width=canvas.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.strokeStyle = "red"

      ctx.stroke();

      ctx.fill();

      ctx.restore();

    }

  </script>

</body>

</html>

效果

http://www.360doc.com/content/16/0809/10/10978981_581855158.shtml

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

  1. HTML5 canvas 绘制五星红旗

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

  2. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

  3. Html5 绘制五星红旗

    Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示: 绘制思路在上图中已有说明,具体代码如下: <script type="text/javascrip ...

  4. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  5. 用canvas绘制折线图

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

  6. 封装 用canvas绘制直线的函数--面向对象

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

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

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

  8. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  9. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

随机推荐

  1. Mysql简要概述

    Mysql学习笔记 Mysql简介: ​ Mysql是一个轻量级关系型数据库管理系统,由瑞典Mysql AB公司开发,目前属于Oracle公司.目前Mysql被广泛地应用在Internet上的中小型网 ...

  2. HTML基础复习1

    网页:HTML(超文本标记语言) 网页分为静态网页和动态网页,区别:动态网页中可以加入脚本代码,还可以动态的引入数据库中的信息. HTML的结构 <html> <head>头信 ...

  3. 在HTML中改变input标签中的内容

    在HTML中改变input标签的内容 1.使用js自带的方法: document.getElementById('roadName').value='武汉路';//通过标签选择器来选择标签,然后设置值 ...

  4. 网络流量预测入门（一）之RNN 介绍

    目录 网络流量预测入门(一)之RNN 介绍 RNN简介 RNN 结构 RNN原理 结构原理 损失函数$E$ 反向传播 总结 参考 网络流量预测入门(一)之RNN 介绍 了解RNN之前,神经网络的知识是 ...

  5. 什么是Etcd，如何运维Etcd ？

    介绍 ETCD 是一个分布式.可靠的 key-value 存储的分布式系统,用于存储分布式系统中的关键数据:当然,它不仅仅用于存储,还提供配置共享及服务发现:基于Go语言实现. ETCD的特点 简单: ...

  6. cisco交换机路由器静态路由配置

    一.切换模式 router>en                           //用户模式enable router#conf t                      //特权模式 ...

  7. tcpdump安装与参数详解

    Centos7安装Tcpdump 对于大部分的Linux操作系统,已经默认安装了tcpdump,可以通过以下命令查看: [root@localhost local]# tcpdump --versio ...

  8. ElasticSearch基本简介（一）

    一.ES简介 1,什么是ES ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式的全文搜索引擎,其对外服务是基于RESTful web接口发布的.Elasticsearc ...

  9. .Net框架的概念和运行原理

    原文 https://blog.csdn.net/WandDouDou/article/details/80678449

  10. Python学习【第6篇】：集合的定义和基本方法

    1.概念 (1)不同元素组成 例: s = {1,2,3,4,4,4,4,4,4}print(s)运行结果:{1, 2, 3, 4}因为是不同元素组成,因此去重了 (2)无序 例: s = {&quo ...