`
128kj
  • 浏览: 600182 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas画标准的五星红旗(中国国旗)

阅读更多
国旗的标准画法图。



代码如下:
<!DOCTYPE html>
<html>
<head>
  <meta charset="gbk">
  <title>中国标准国旗</title>
</head>
<body>
  <canvas id="canvas" width="600" height="400"></canvas>
  <script>
  /**
    使用HTML5绘制标准五星红旗
  */
var canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');
  var width=canvas.width;
  var height=width*2/3;
  var w=width/30;//小网格的宽
  context.fillStyle="red";
  context.fillRect(0,0,width,height);
  var maxR = 0.15, minR = 0.05;//
  var maxX = 0.25, maxY = 0.25;//大五星的位置
  var minX = [0.50, 0.60, 0.60, 0.50];
  var minY = [0.10, 0.20, 0.35, 0.45];
  // 画大☆
  var ox = height * maxX, oy = height * maxY;
  create5star(context,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));
    create5star(context,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);
   }
  //辅助线
  context.moveTo(0,height/2)
  context.lineTo(width,height/2);
  context.stroke();
  context.moveTo(width/2,0);
  context.lineTo(width/2,height);
  context.stroke();
  //画网格,竖线
   for(var j=0;j< 15;j++){
      context.moveTo(j*w,0);
      context.lineTo(j*w,height/2);
      context.stroke();
   }
   //画网格,横线
    for(var j=0;j< 10;j++){
      context.moveTo(0,j*w);
      context.lineTo(width/2,j*w);
      context.stroke();
   }
    //画大圆
    context.beginPath();
    context.arc(ox,oy,maxR*height,0,Math.PI*2,false);
    context.closePath();
    context.stroke();
    // 画小圆
    for (var idx = 0; idx < 4; idx++) {
     context.beginPath();
     var  sx = minX[idx] * height, sy = minY[idx] * height;
     context.arc(sx, sy, height * minR,0,Math.PI*2,false);
     context.closePath();
     context.stroke();
    }  
    //大圆中心与小圆中心连接线
    for (var idx = 0; idx < 4; idx++) {
     context.moveTo(ox,oy);
     var  sx = minX[idx] * height, sy = minY[idx] * height;
     context.lineTo(sx, sy);
     context.stroke();
    }  
   //绘制五角星
  /**
   * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
   * rotate:绕对称轴旋转rotate弧度
   */
  function create5star(context,sx,sy,radius,color,rotato){
    context.save();
    context.fillStyle=color;
    context.translate(sx,sy);//移动坐标原点
    context.rotate(Math.PI+rotato);//旋转
    context.beginPath();//创建路径
    var x = Math.sin(0);
    var y= Math.cos(0);
    var dig = Math.PI/5 *4;
    for(var i = 0;i< 5;i++){//画五角星的五条边
     var x = Math.sin(i*dig);
     var y = Math.cos(i*dig);
     context.lineTo(x*radius,y*radius);
   } 
   context.closePath();
   context.stroke();
   context.fill();
   context.restore();
  }  


</script>
</body>
</html>
观看效果与源码下载:http://www.108js.com/article/article7/70179.html?id=920
  • 大小: 21.4 KB
  • 大小: 8.1 KB
1
0
分享到:
评论

相关推荐

    HTML5 Canvas绘制五星红旗.docx

    使用 HTML5 Canvas 绘制中国国旗需要了解以下几个知识点: 1. Canvas 绘图环境:通过 `getContext()` 方法获得的绘图环境对象,提供了各种绘图方法,如 `fillRect()`、`fill()`、`stroke()` 等。 2. 路径定义:使用...

    详解Html5 Canvas画线有毛边解决方法

    Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题,特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...

    HTML5 Canvas画印章

    在这个“HTML5 Canvas画印章”的主题中,我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性,它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    html5 canvas画布绘制圆形时钟代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制。这个技术为网页带来了丰富的交互性和视觉效果。在这个“html5 canvas画布绘制圆形时钟代码”示例中,我们将深入探讨如何利用Canvas ...

    HTML5 Canvas 画布开发 傻瓜书 (英文版)

    在HTML5标准中,Canvas是其一大亮点,使得网页不仅仅是静态内容的容器,而是能够承载复杂的动态应用。 首先,书中可能会介绍如何在HTML文档中创建Canvas元素,以及如何通过JavaScript获取Canvas的绘图上下文(2D或...

    html5 canvas填色画游戏代码

    在这个“html5 canvas填色画游戏代码”中,我们主要关注以下几个知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素,通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法,如`...

    可定义笔刷和画布的HTML5 Canvas画板画图工具

    HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上绘制矢量图形和位图图像。这个"可定义笔刷和画布的HTML5 Canvas画板画图工具"利用了Canvas API来创建一个互动的画布,用户可以在这个画布上进行绘画,...

    原生js html5 canvas 3D云动画效果

    在IT行业中,HTML5、Canvas和JavaScript是创建交互式网页内容的重要工具,特别是对于实现动态图形和动画。本文将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建3D云动画效果。 首先,HTML5 Canvas是一个...

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    用HTML5 canvas画的幻灯片.zip

    在这个“用HTML5 canvas画的幻灯片”项目中,我们主要会探讨以下几个核心知识点: 1. **HTML5 Canvas基础**: HTML5的canvas是一个基于矢量图形的画布,通过JavaScript来控制其内容。它的基本结构是在HTML中定义一...

    HTML5 Canvas 动画时钟

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者直接在浏览器中进行动态图形渲染,无需依赖任何插件。在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观...

    HTML5 Canvas彩色渐变背景动画效果

    HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上直接绘制图形,创建丰富的动态视觉体验。这款基于HTML5 Canvas的彩色渐变背景动画效果,是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在...

    HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文【PDF】

    基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...

    canvas拼图游戏,基于html + canvas画布实现

    canvas拼图游戏,基于html + canvas画布实现

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    HTML5 Canvas核心技术 图形、动画与游戏开发电子书

    HTML5 Canvas核心技术 图形、动画与游戏开发

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

    html5 canvas小人跳舞动画特效

    HTML5 Canvas是HTML5标准中引入的一个强大的图形绘制API,它允许开发者在浏览器上直接用JavaScript进行2D图形的绘制。这个"html5 canvas小人跳舞动画特效"是一个利用Canvas API实现的交互式动画示例,它展示了如何...

Global site tag (gtag.js) - Google Analytics