在HTML5一览中，我们提到html 5被冠以很多高帽，其中最高的一顶、备受争议的就是"Flash杀手"。IT评论界老喜欢用这个词了，杀手无处不在。不管是不是杀手，HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是 canvas元素。

作为HTML5标准的一部分，Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。

大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ，firefox 也可以通过插件形式支持 3D canvas 。我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。 参见：http://excanvas.sourceforge.net/。

效果演示

<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
//绘制红色的画布
ctx.fillStyle = '#f00';
ctx.fillRect(0,0,450,300);
ctx.translate(75,75);
//绘制大五角星
ctx.save();
ctx.rotate(Math.PI*2/7);
drawStar(ctx,40);
ctx.restore();
//绘制四个小五角星
ctx.save();
ctx.translate(80,-50);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(110,-10);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(110,30);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(80,70);
drawStar(ctx,10);
ctx.restore();
}
//绘制五角星函数
function drawStar(ctx,r){
ctx.save();
ctx.beginPath()
ctx.moveTo(r,0);
for (var i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((r/0.525731)*0.200811,0);
} else {
ctx.lineTo(r,0);
}
}
ctx.closePath();
ctx.fillStyle='#FFFF00';
ctx.fill();
ctx.restore();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>

HTML5 代码如下：

01 <html>
02 <head>
03 <title>Canvas tutorial</title>
04 <script type="text/javascript">
05       function draw() {
06           var ctx = document.getElementById('canvas').getContext('2d');
07           //绘制红色的画布
08           ctx.fillStyle = '#f00';
09           ctx.fillRect(0,0,450,300);
10           ctx.translate(75,75);
11           //绘制大五角星
12           ctx.save();
13           ctx.rotate(Math.PI*2/7);
14           drawStar(ctx,40);  
15           ctx.restore();
16           //绘制四个小五角星
17           ctx.save();
18           ctx.translate(80,-50);
19           drawStar(ctx,10);  
20           ctx.restore();
21           ctx.save();
22           ctx.translate(110,-10);
23           drawStar(ctx,10);   
24           ctx.restore();
25           ctx.save();
26           ctx.translate(110,30);
27           drawStar(ctx,10);   
28           ctx.restore();
29           ctx.save();
30           ctx.translate(80,70);
31           drawStar(ctx,10);   
32           ctx.restore();
33         }
34         //绘制五角星函数
35     function drawStar(ctx,r){
36           ctx.save();
37           ctx.beginPath()
38           ctx.moveTo(r,0);
39           for (var i=0;i<9;i++){
40             ctx.rotate(Math.PI/5);
41             if(i%2 == 0) {
42               ctx.lineTo((r/0.525731)*0.200811,0);
43             } else {
44               ctx.lineTo(r,0);
45             }
46           }
47           ctx.closePath();
48           ctx.fillStyle='#FFFF00';
49           ctx.fill();
50           ctx.restore();
51     }
52     </script>
53 </head>
54 <body onload="draw();">
55 <canvas id="canvas" width="800" height="300"></canvas>
56 </body>
57 </html>

HTML5用canvas绘制五星红旗的更多相关文章

  1. HTML5 canvas 绘制五星红旗

    这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...

  2. canvas绘制五星红旗

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  4. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  5. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  6. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  7. html5的canvas绘制线条，moveTo和lineTo详解

    今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...

  8. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  9. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 数据分析处理库Pandas——索引进阶

    Series结构 筛选数据 指定值 备注:查找出指定数值的索引和数值. 逻辑运算 备注:查找出值大于2的数据. 复合索引 DataFrame结构 显示指定列 筛选显示 备注:值小于0的显示原值,否则显 ...

  2. C语言程序设计·谭浩强（第四版）第二章课后习题的答案，算法——程序的灵魂

    C语言程序小练习 1.用C语言设计程序算出1-1/2+1/3-14+1/5...+1/99-1/100的值 #include<stdio.h> int main() { ; double ...

  3. app:showAsAction 和android:showAsAction

    app:showAsAction 它有三个可选项1.always:总是显示在界面上2.never:不显示在界面上,只让出现在右边的三个点中3.ifRoom:如果有位置才显示,不然就出现在右边的三个点中 ...

  4. 20145202马超《网络对抗》Exp3免杀 进阶

    木马化正常软件,如通过改变机器指令.实现可免杀免防火墙提示的后门. 继上次实验3所做的代码在主函数里面加上一行调用就可以 改各种属性,这里我参考了郝浩同学的博客 最后我还是遇到了问题 后来发现虽然有那 ...

  5. C# 控制台应用程序输出颜色字体

    最佳解决方案的代码: static void Main(string[] args) { Console.ForegroundColor = ConsoleColor.Green; Console.W ...

  6. Hibernate-ORM:13.Hibernate中的连接查询

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客将会解释Hibernate中的连接查询(各种join) 一,目录 1.内链接 1.1显式内连接(inn ...

  7. 关于 poorpool

    poorpool 真名 chenyixiao.是一条傻逼题都不会做的没有脑子的咸鱼. 山西省临汾第一中学 高二 sx省队里最菜的那一个进队靠暴力. 普通的理科生,曾经爱好数学,然而到了高中发现自己所谓 ...

  8. fildder抓包工具详解

    fildder页面介绍名称和含义 名称 含义 # 抓取HTTP Request的顺序,从1开始,以此递增 Result HTTP状态码 Protocol 请求使用的协议,如HTTP/HTTPS/FTP ...

  9. 3、shader深度测试（Cull、ZWrite 、ZTest ）

    剔除和深度测试是渲染法线中的一个流程 Cull:默认情况下,Unity中给的所有Shader都是单面的,它都把反面的渲染给关闭掉了,如果你在开发的过程中需要使用到双面,只要把cull关闭(off)即可 ...

  10. MySQL日常管理

    DB2最佳分页语句 SELECT * FROM ( SELECT inner2_.*, ROWNUMBER() OVER(ORDER BY ORDER OF inner2_) AS rownumber ...