在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. MySQL server has gone away报错原因分析及解决办法

    原因1. MySQL 服务宕了 判断是否属于这个原因的方法很简单,执行以下命令,查看mysql的运行时长 $ mysql -uroot -p -e "show global status l ...

  2. C++常量（const）的使用

    #include <iostream> using namespace std; class MyClass { public: int GetValue() const ; int Ge ...

  3. idea 普通文件夹 转换成 module

    经常会遇到从GitHub上download的progect在idea里面打开是普通文件夹形式,而并不是我们想要的module形式(文件夹图标右下角有个蓝色的tag),那么如何快速转换成我们想要的mod ...

  4. 异步消息处理(Message, Handler, MessageQueue, Looper)

    AsyncTask 适用于单线程任务处理,多任务处理还是 Message/Handler 处理方便一些 主要使用方式: 1,创建子类继承自 Handler 类,覆盖 handleMessage(Mes ...

  5. 汇编实验15：安装新的int 9中断例程

    汇编实验15:安装新的int 9中断例程 任务 安装一个新的int 9中断例程,功能:在DOS下,按下“A”键后,除非不在松开,一旦松开后,就显示满屏幕的“A”,其他键照常处理. 预备知识概要 这次实 ...

  6. C#中Equals和= =(等于号)的比较)（转载）

    C#中Equals和= =(等于号)的比较) 相信很多人都搞不清Equals和 = =的区别,只是零星的懂一点,现在就让我带大家来进行一些剖析 一.           值类型的比较 对于值类型来说  ...

  7. 第三十五篇 类的内置属性（attr属性），包装和授权，__getattr__

    双下划线开头的attr方法,都是类内置的方法. 一. 如果没有在类里定义这三个方法,调用的时候就调用类内置的默认的方法 class Too: pass # 类没有定义这三个属性,就用系统默认的方法 t ...

  8. Kubernetes集群（概念篇）

    Kubernetes介绍 2013年docker诞生,自此一发不可收拾,它的发展如火如荼,作为一个运维如果不会docker,那真的是落伍了. 而2014年出现的kubernetes(又叫k8s)更加炙 ...

  9. CodeForces-1121C System Testing

    题目链接 https://vjudge.net/problem/CodeForces-1121C 题面 Description Vasya likes taking part in Codeforce ...

  10. LeetCode 21 ——合并两个有序链表

    1. 题目 2. 解答 新建一个带有哨兵结点的链表,依次比较两个有序链表的结点值,将较小值的结点插入到新链表后面.直到其中一个比较完毕,将另一个链表剩余的结点全部放到新链表最后面即可.最后,可以删除哨 ...