代码



<!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. Java并发包源码学习系列：JDK1.8的ConcurrentHashMap源码解析

    目录 为什么要使用ConcurrentHashMap? ConcurrentHashMap的结构特点 Java8之前 Java8之后 基本常量 重要成员变量 构造方法 tableSizeFor put ...

  2. Mybatis Plus 3.4版本之后分页插件的变化

    一.MybatisPlusInterceptor 从Mybatis Plus 3.4.0版本开始,不再使用旧版本的PaginationInterceptor ,而是使用MybatisPlusInter ...

  3. SpringBoot 报错： Circular view path [readingList] 解决办法

    spring boot报错: Circular view path [readingList]: would dispatch back to the current handler URL [/re ...

  4. 极光推送的设备唯一性标识 RegistrationID

    极光推送的设备唯一性标识 RegistrationID 极光推送的设备唯一性标识 RegistrationID | 极光博客 https://blog.jiguang.cn/registrationi ...

  5. 【LinuxShell】echo用法详解

    使用echo打印信息到终端 1 [Shell]echo "yz test" 2 yz test 3 [Shell]echo yz test 4 yz test 5 [Shell]e ...

  6. XV6学习（9）Lab cow: Copy-on-write fork

    代码在github上.总体来说如果理解了COW机制的话,这个实验的完成也没有很复杂. 这一个实验是要完成COW(copy on write)fork.在原始的XV6中,fork函数是通过直接对进程的地 ...

  7. Apache Hudi 0.7.0版本重磅发布

    重点特性 1. Clustering 0.7.0版本中支持了对Hudi表数据进行Clustering(对数据按照数据特征进行聚簇,以便优化文件大小和数据布局),Clustering提供了更灵活地方式增 ...

  8. JavaWeb——Servlet开发

    什么是Servlet? Servlet运行的过程 Servlet的生命周期 生命周期的各个阶段 Servlet的配置 使用Web.xml配置 使用注解配置 Servlet相关接口 ServletCon ...

  9. 深信服edr控制中心漏洞——代码执行

    第一处代码执行 文件:tool/php_cli.php第64行

  10. k8s command & args

    命令和参数说明: command.args两项实现覆盖Dockerfile中ENTRYPOINT的功能,具体的command命令代替ENTRYPOINT的命令行,args代表集体的参数. 如果comm ...