代码



<!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. Poj-P1088题解【动态规划/记忆化搜索】

    本文为原创,转载请注明:http://www.cnblogs.com/kylewilson/ 题目出处: http://poj.org/problem?id=1088 题目描述: 区域由一个二维数组给 ...

  2. 2021年【线上】lammps分子动力学技术实战培训班

    材料模拟分子动力学课程 3月19号--22号 远程在线课 lammps分子动力学课程 3月12号--15号 远程在线课 第一性原理VASP实战课 3月25号-28号 远程在线课 量子化学Gaussia ...

  3. mysqlG基于TID模式同步报错 （Last_IO_Errno: 1236）

    mysqlG基于TID模式同步报错Last_IO_Errno: 1236 Last_IO_Error: Got fatal error 1236 from master when reading da ...

  4. Matlab GUI学习总结

    从简单的例子说起吧.   创建Matlab GUI界面通常有两种方式:   1,使用 .m 文件直接动态添加控件     2.  使用 GUIDE 快速的生成GUI界面显然第二种可视化编辑方法算更适合 ...

  5. python 字典（formkey 建立 取值 赋值 删除 ）

      formkey快速建立空字典   result = {}.fromkeys(['name','age','job'],None) print(result)   #往字典里添加元素 result. ...

  6. Zerotier在windows下实现内网远程桌面

    Zerotier实现内网远程桌面 使用背景 实验室设备条件过于恶劣 向日葵在有些场景下会莫名崩溃,或者画面不动. Teamviewer免费版在之前用的时候出现过疑似商业行为被断连,github上寻解决 ...

  7. c++hook内联汇编模板

    1 #include "Windows.h" 2 #include "tlhelp32.h" 3 #include "String.h" 4 ...

  8. MySQL的双主配置

    配置MySQL双主配置,需要先配置MySQL的主从复制,传送门: 0.集群规划 hadoop105 hadoop106 hadoop107 MySQL(master,slave) MySQL(slav ...

  9. Python基础（列表中变量与内存关系）

    在Python中,copy的是内存地址,引用的是列表的引用地址,列表里存的是各个元素的地址 例如: name = [1,2,3,4,['xfxing','summer',6]] n2 = name.c ...

  10. OSS与文件系统的对比 文件存储 块存储 对象存储

    基本概念介绍_开发指南_对象存储 OSS-阿里云  https://help.aliyun.com/document_detail/31827.html 强一致性 Object 操作在 OSS 上具有 ...