代码



<!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. php压缩文件夹并下载到本地

    /** * @param $path 要压缩的文件夹路径 * @param $filename 要生成的压缩包名称 */ public function create_zip($path,$filen ...

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

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

  3. 知识图谱KnowledgeGraph核心技术培训班 2月03日— 2月06日

  4. Service Locator Pattern 服务定位

    https://www.geeksforgeeks.org/service-locator-pattern/ Service Locator Pattern Last Updated: 06-03-2 ...

  5. （008）每日SQL学习：Oracle Not Exists 及 Not In 使用

    今天遇到一个问题,not in 查询失效,我以为是穿越了,仔细查了点资料,原来理解有误! select value from temp_a a where a.id between 1 and 100 ...

  6. 数据备份与恢复 半持久化 全持久化 fork aof rdb Backing up Disaster recovery 备份 容灾

    Redis数据备份与恢复 - 流年晕开时光 - 博客园 https://www.cnblogs.com/deny/p/11531355.html Redis数据备份与恢复 Redis所有数据都是保存在 ...

  7. 3分钟搞懂什么是WPF。

    先推荐下猛哥(刘铁猛)的书籍  <深入浅出WPF>. 一直以来,完美的用户体验是桌面应用程序和Web应用程序中的一大障碍.许多开发人员绞尽脑汁将界面设计得美观炫丽些.互 动感强些,但费了九 ...

  8. COGS 307 模拟退火

    307. [HAOI2006] 均分数据 ★★   输入文件:data.in   输出文件:data.out   简单对比时间限制:3 s   内存限制:128 MB [问题描述] 已知N个正整数:A ...

  9. EasyUI动态显示后台数据库中的数据

    最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...

  10. Spark剖析-宽依赖与窄依赖、基于yarn的两种提交模式、sparkcontext原理剖析

    Spark剖析-宽依赖与窄依赖.基于yarn的两种提交模式.sparkcontext原理剖析 一.宽依赖与窄依赖 二.基于yarn的两种提交模式深度剖析 2.1 Standalne-client 2. ...