国旗的标准画法图。
代码如下：
<!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
分享到：
相关推荐
使用 HTML5 Canvas 绘制中国国旗需要了解以下几个知识点： 1. Canvas 绘图环境：通过 `getContext()` 方法获得的绘图环境对象，提供了各种绘图方法，如 `fillRect()`、`fill()`、`stroke()` 等。 2. 路径定义：使用...
Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题，特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...
在这个“HTML5 Canvas画印章”的主题中，我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性，它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制。这个技术为网页带来了丰富的交互性和视觉效果。在这个“html5 canvas画布绘制圆形时钟代码”示例中，我们将深入探讨如何利用Canvas ...
在HTML5标准中，Canvas是其一大亮点，使得网页不仅仅是静态内容的容器，而是能够承载复杂的动态应用。 首先，书中可能会介绍如何在HTML文档中创建Canvas元素，以及如何通过JavaScript获取Canvas的绘图上下文（2D或...
在这个“html5 canvas填色画游戏代码”中，我们主要关注以下几个知识点： 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素，通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法，如`...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上绘制矢量图形和位图图像。这个"可定义笔刷和画布的HTML5 Canvas画板画图工具"利用了Canvas API来创建一个互动的画布，用户可以在这个画布上进行绘画，...
在IT行业中，HTML5、Canvas和JavaScript是创建交互式网页内容的重要工具，特别是对于实现动态图形和动画。本文将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建3D云动画效果。 首先，HTML5 Canvas是一个...
HTML5 canvas 是一种在网页上绘制图形的API，它允许开发者通过JavaScript动态创建和修改二维图形，从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中，我们利用canvas元素来模仿经典的Windows屏保...
在这个“用HTML5 canvas画的幻灯片”项目中，我们主要会探讨以下几个核心知识点： 1. **HTML5 Canvas基础**： HTML5的canvas是一个基于矢量图形的画布，通过JavaScript来控制其内容。它的基本结构是在HTML中定义一...
HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者直接在浏览器中进行动态图形渲染，无需依赖任何插件。在这个"HTML5 Canvas 动画时钟"的主题中，我们将深入探讨如何利用Canvas API创建一个实时更新的、美观...
HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接绘制图形，创建丰富的动态视觉体验。这款基于HTML5 Canvas的彩色渐变背景动画效果，是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在...
基瑞编著的《HTML5Canvas核心技术：图形动画与游戏开发》是HTML5 Canvas领域的标杆之作，也是迄今为止该领域内容最为全面和深入的著作之一，是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
canvas拼图游戏,基于html + 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标准中引入的一个强大的图形绘制API，它允许开发者在浏览器上直接用JavaScript进行2D图形的绘制。这个"html5 canvas小人跳舞动画特效"是一个利用Canvas API实现的交互式动画示例，它展示了如何...