在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. PHP入门笔记--基础语法二

    一.函数 自定义函数 任何有效的 PHP 代码都有可能出现在函数内部,甚至包括其它函数和类定义. <?php function foo() { function bar() { echo &qu ...

  2. windows环境下安装scrapy框架报错问题--最快捷有效的解决方案

    windows在执行如下命令,安装scrapy的过程中会报错: pip install scrapy 报错分析: windows环境下,会出现如下错误: 1.提示的错误是编译环境的问题,字面意思看需要 ...

  3. Unicode控制字符

    Unicode控制字符就是特殊的Unicode字符 控制字符转义代码对照表 Unicode-控制字符 ‎LRM ‏RLM ‍ZWJ ‌ZWNJ ‪LRE ‭LRO ‮RLO ‬PDF NADS  ...

  4. [bzoj1359][Baltic2009]Candy

    给定N个数对$(T_i,S_i)$,表示时刻$S_i$时在位置$T_i$处出现一粒糖果.有一些机器人可供使用,每个机器人可花费一单位时间向相邻位置移动.要求用最少的机器人接到全部糖果.时刻0时机器人位 ...

  5. 一种简单实用的双向电平转换电路3.3V-5V

    当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...

  6. **leetcode笔记--4 Sum of Two Integers

    question: Calculate the sum of two integers a and b, but you are not allowed to use the operator + a ...

  7. jquery框架一点小心得

    下面的小事例 主要实现了 一和按ID查找,并获取元素的 value 或 标签内容和一个去字符串空格的小功能能 假设元素id=“myid”: 获取标签内容$("myid").html ...

  8. 「日常训练」「小专题·USACO」 Barn Repair（1-4）

    题意 之后补. 分析 这题同样也很精巧.我们不妨思考一下,如果只允许用一块木板,那么要购买多少距离?是整个的距离吗?不是,是从第一个到最后一个(哈哈哈哈哈哈哈).但是,不包括第一个的"左边& ...

  9. Ubuntu下使用Git_3

    这里是我举得小白阶段比较困难的地方了, 当在我们向远程数据库推送数据之前,有其他用户向远程数据库推送的相同的文件的时候,服务器会拒绝我们的推送,这个时候就需要我们来整合这两个文件 如图说是,现在显示的 ...

  10. python 自动化-"Elements not visible"

    一,今天试着跑一个多乘客下单的python脚本, 总是遇到  Elements not visible 或者  not clickable的错误 解决方法: 1. 首先观察脚本运行时, 报错的那个元素 ...