代码


  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>canvas绘制五星红旗</title>
  7. </head>
  8. <body>
  9.   <canvas id="canvas" width="600" height="400"></canvas>
  10.   <script>
  11.     var canvas = document.getElementById('canvas');
  12.     var ctx = canvas.getContext('2d');
  13.     // 绘制背景
  14.     var width=canvas.width;
  15.     var height=width*2/3;
  16.     ctx.fillStyle="red";
  17.     ctx.fillRect(0,0,width,height);
  19.     var maxR=0.15,minR=0.05;                //0.15大五角星的半径，0.05小五角星的半径
  20.     var maxX=0.25,maxY=0.25;                //大五角星的位置
  21.     var minX=[0.50,0.60,0.60,0.50];         //小五角星的X坐标
  22.     var minY=[0.10,0.20,0.35,0.45];         //小五角星的Y坐标
  23.     var ox=height*maxX,oy=height*maxY;        //大五角星的中心坐标
  24.     drawStar(ctx,ox,oy,height*maxR,"#ff0",0);        //绘制五角星
  25.     for (var idx = 0; idx < 4; idx++) {
  26.             var  sx = minX[idx] * height, sy = minY[idx] * height;
  27.             var  theta = Math.atan((oy - sy)/(ox - sx));
  28.             drawStar(ctx,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);
  29.      }
  31.      /*五角星的坐标为（sx,sy）,半径为radius,rotate为0时一个顶点在对称轴上*/
  32.      /*rotate:绕对称轴旋转rotate弧度*/
  33.     function drawStar(ctx,sx,sy,radius,color,rotate){
  34.       ctx.save();
  35.       ctx.fillStyle=color;
  36.       ctx.translate(sx,sy);                //移动坐标原点
  37.       ctx.rotate(Math.PI+rotate);          //Math.PI等于圆周率3.14
  38.       ctx.beginPath();
  39.       //360度分成5份，2/5*PI,但底下是PI/5*4
  40.       var dig=Math.PI/5*4;
  41.       for(var i=0;i<5;i++){           //画五角星的五条长边
  42.         var x=Math.sin(i*dig);        //点的x坐标
  43.         var y=Math.cos(i*dig);        //点的y坐标
  44.         ctx.lineTo(x*radius,y*radius);
  45.       }
  46.       ctx.closePath();
  47.       ctx.strokeStyle = "red"
  48.       ctx.stroke();
  49.       ctx.fill();
  50.       ctx.restore();
  51.     }
  52.   </script>
  53. </body>
  54. </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. 本地Mac通过堡垒机代理实现跨堡垒机scp问题

    近日,公司在跳板机前架设了堡垒机,以防止ssh攻击,但这带来一个问题,我们平常直接ssh跳板机,可以直接使用scp来上传或下载跳板机数据到本地 架设堡垒之后经常使用的scp工具不好用了 于是本期就来解 ...

  2. Linux定时任务crontab通俗易懂简单扼要地解析

    1.安装crontab 在配置好yum源的情况下,直接执行如下命令即可: yum install crontab 2.查看当前环境上已经有的定时任务有哪些? 执行如下命令即可 crontab -l 如 ...

  3. 一键测试VPS到国内速度脚本 SuperBench.sh，以及一键验收云主机脚本

    我们买国外VPS服务器测试网络通常会用到speedtest,speedtest默认是测试到最近的节点,那么到国内速度如何呢?虽然可以指定服务器编号,但是一个个测试还是比较麻烦的,这里推荐一个脚本整合了 ...

  4. GraphQL 在酒店系统上的实践

    https://mp.weixin.qq.com/s/Pmut13GYP-kwR2xm8fH-7Q

  5. shiro的授权与认证

    shiro的授权与认证 package com.cy.pj.common.aspect;import java.lang.reflect.Method;import java.util.Arrays; ...

  6. 龙芯fedora28日常生存指南

    2021-01-30 v0.0.5 从0.0.1开始改了非常多,一月余时间的花费渴望为其他人提供一点帮助,能够快速上手. 这主要是这一年来我从3B1500到3A4000再到福珑2的日常使用记录,是之前 ...

  7. Language Guide (proto3) | proto3 语言指南（一）定义消息类型

    定义消息类型 首先让我们看一个非常简单的例子.假设您想定义一个搜索请求消息格式,其中每个搜索请求都有一个查询字符串.您感兴趣的特定结果页以及每页的结果数.下面是用于定义.proto消息类型的文件. s ...

  8. SparkStreaming算子操作，Output操作

    SparkStreaming练习之StreamingTest,UpdateStateByKey,WindowOperator 一.SparkStreaming算子操作 1.1 foreachRDD 1 ...

  9. 查看linux系统 公网ip

    查公网IP时候, 百度输入 IP可看 linux 系统(无界面) : curl cip.cc

  10. python--基础2 （数据类型及应用）

    资源池 链接:https://pan.baidu.com/s/1OGq0GaVcAuYEk4F71v0RWw 提取码:h2sd python数据类型 字符串 列表 字典 数字(整数) 数字(浮点数) ...