Html5 绘制五星红旗
Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示:
绘制思路在上图中已有说明,具体代码如下:
<script type="text/javascript"> //绘制五角星,其中一点垂直向上,相隔的点相连,即可绘制。
function drawStar(ctx,starCenterX,starCenterY,starRadius) {
var aX = starCenterX;
var aY = starCenterY - starRadius;
var bX = starCenterX - Math.cos(18 * Math.PI / 180) * starRadius;
var bY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
var cX = starCenterX - Math.cos(54 * Math.PI / 180) * starRadius;
var cY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
var dX = starCenterX + Math.cos(54 * Math.PI / 180) * starRadius;
var dY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
var eX = starCenterX + Math.cos(18 * Math.PI / 180) * starRadius;
var eY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.moveTo(aX, aY);
ctx.lineTo(cX, cY);
ctx.lineTo(eX, eY);
ctx.lineTo(bX, bY);
ctx.lineTo(dX, dY);
ctx.lineTo(aX, aY);
ctx.fill();
ctx.closePath();
} window.onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = 300*1.5;
var height = 200*1.5;
var sX = 50; //其实坐标
var sY = 50; //其实坐标
var step = 10*1.5;
//绘制矩形
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = "red";
ctx.fillRect(sX, sY, width, height);
ctx.closePath();
//绘制大五角星
var bigStarCenterX = sX + 5 * step;
var bigStarCenterY = sY + 5 * step;
var bigStarRadius = (height * 3 / 10) / 2; //外接圆直径为旗高3/10,半径要再除以2
drawStar(ctx, bigStarCenterX, bigStarCenterY, bigStarRadius);
//绘制小五角星
var smallStarRadius = (height * 1 / 10) / 2; //外接圆直径为旗高1/10,半径要再除以2 var smallStarCenterX_1 = sX + 10 * step;
var smallStarCenterY_1 = sY + 2 * step;
drawStar(ctx, smallStarCenterX_1, smallStarCenterY_1, smallStarRadius);
var smallStarCenterX_2 = sX + 12 * step;
var smallStarCenterY_2 = sY + 4 * step;
drawStar(ctx, smallStarCenterX_2, smallStarCenterY_2, smallStarRadius);
var smallStarCenterX_3 = sX + 12 * step;
var smallStarCenterY_3 = sY + 7 * step;
drawStar(ctx, smallStarCenterX_3, smallStarCenterY_3, smallStarRadius);
var smallStarCenterX_4 = sX + 10 * step;
var smallStarCenterY_4 = sY + 9 * step;
drawStar(ctx, smallStarCenterX_4, smallStarCenterY_4, smallStarRadius);
};
</script>
Html5 绘制五星红旗的更多相关文章
- HTML5 canvas 绘制五星红旗
这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
- html5绘制折线图
html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...
- HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制五星红旗
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- HTML5用canvas绘制五星红旗
在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...
- HTML5 绘制简单圆形 loading. . . .
现在有很多的 loading 组件 什么js 等等 闲来没事就写一个 H5的 loading 有很多的Loading 是一张张图片 js 控制的 有了 canvas的 出现 你就可以体验不同之处了 ...
- Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...
随机推荐
- webform Repeater、地址栏传值、Response
Repeater: 重复器 Repeater中有五个模板,这里需要注意的是4个 <HeaderTemplate> - 开头,只执行一次的内容 <ItemTemplate> - ...
- 进击的Python【第六章】:Python的高级应用(三)面向对象编程
Python的高级应用(三)面向对象编程 本章学习要点: 面向对象编程介绍 面向对象与面向过程编程的区别 为什么要用面向对象编程思想 面向对象的相关概念 一.面向对象编程介绍 面向对象程序设计(英语: ...
- linux python更新
linux的yum依赖自带的Python,为了防止错误,此处更新其实是再安装一个Python 1.查看默认python版本 python -v 2.安装gcc,用于编辑Python源码 yum ins ...
- .NET 项目代码风格要求
原文:http://kb.cnblogs.com/page/179593/ 项目代码风格要求 PDF版下载:项目代码风格要求V1.0.pdf 代码风格没有正确与否,重要的是整齐划一,这是我拟的一份&l ...
- 《DSP using MATLAB》示例Example5.22
代码: Nmax = 2048; fft_time = zeros(1, Nmax); for n = 1:1:Nmax x=rand(1,n); t=clock; fft(x); fft_time( ...
- Operation not allowed after ResultSet closed--操作mysql数据库
一个stmt多个rs进行操作.那么从stmt得到的rs1,必须马上操作此rs1后,才能去得到另外的rs2,再对rs2操作.不能互相交替使用,会引起rs已经关闭错误——Operation not all ...
- DirectX9 Sample_Empty Project
作为第一个程序,EmpytProject仅仅示范了如何绑定DXUTstate结构中的回调函数. 回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当 ...
- CF750E New Year and Old Subsequence
讲道理好久没有做过题了.. 题目大意 给出长度为$n$的只含数字的串,有$q$个询问,每次询问一段区间,问最少删去多少个数才能变成只含2017子序列而不含2016子序列 吉爸爸好强啊.. 定义$a_{ ...
- Linux_10个需要了解的Linux网络和监控命令(转)
源文地址:http://www.linuxde.net/2013/10/15325.html 1. hostname hostname 没有选项,显示主机名字 hostname –d 显示机器所属域名 ...
- *POJ1830 高斯消元
开关问题 Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 8010 Accepted: 3161 Description ...