代码



<!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. CodeMonkey少儿编程第3章 times循环

    目标 了解程序由哪三种基本的结构组成 了解循环的概念 掌握times的结构与用法 三种基本结构 计算机程序由三种最基本的结构组成,它们分别是: 顺序结构 循环结构 选择结构 千万不要被这些陌生的术语给 ...

  2. springboot项目启动并立即执行自定义程序内容

    第一种:实现ApplicationRunner接口,重写其中的run()方法: 第二种:实现CommandLineRunner接口,重写其中的run()方法: 还有第三种...

  3. vue原生文件上传，可以多文件上传

    1.单文件上传 <template> <div> <label for="fileInput"> <i aria-hidden=" ...

  4. Java并发包源码学习系列：阻塞队列BlockingQueue及实现原理分析

    目录 本篇要点 什么是阻塞队列 阻塞队列提供的方法 阻塞队列的七种实现 TransferQueue和BlockingQueue的区别 1.ArrayBlockingQueue 2.LinkedBloc ...

  5. C语言中二维数组声明时，探究省略第一维的原因

    我们在使用二维数组作为参数时,我们既可以指明这个数组各个维度的维数,同时我们也可以省略一维,但是二维却不能省略.why呢?由于编译器原理的限制,在一个数组Elemtype test[m][n]中,访问 ...

  6. 干货 | 质量保障新手段，携程回归测试平台实践 原创 Sedro 携程技术 2021-01-21

    干货 | 质量保障新手段,携程回归测试平台实践 原创 Sedro 携程技术 2021-01-21

  7. 两个list<Map<String,String>>放入一个list中

    // public static void main(String[] args) {// List<Map<String, String>> list2 = new Arra ...

  8. LOJ10104Blockade

    POI 2008 Byteotia 城市有 n 个城镇,m 条双向道路.每条道路连接两个不同的城镇,没有重复的道路,所有城镇连通.输出 n 个数,代表如果把第i  个点去掉,将有多少对点不能互通. 输 ...

  9. centos安装Qt

    转:http://blog.csdn.net/wavelee/article/details/7855727 在编译Qt4.8.6版本的库时,在配置时 ./configure 出现了如下的错误: Ba ...

  10. 使用汇编语言实现memcpy

    把内核放入内存,究竟需做什么 写满实现内核功能的代码的文件会被编译成一个ELF文件.这个ELF文件不同于LOADER BIN文件.后者实质是一个没有使用DOS命令的COM文件.因此,只需将它原封不动地 ...