在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. hadoop生态搭建（3节点）-05.mysql配置_单节点

    # ==================================================================node1 # ======================== ...

  2. python3 练习题100例 （二十九）猴子吃桃问题

    题目内容: 猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第n天(<1<n< ...

  3. Scrapy框架的初步使用

    Scrapy scrapy框架是一个非常全面的爬虫框架,可以说是爬虫界的django了,里面有相当多的组件,格式化组件item,持久化组件pipeline,爬虫组件spider 首先我们要先和djan ...

  4. 以源码安装的lamp环境为依托，源码安装zabbix监控系统

    1.源码安装lamp环境 1)安装httpd, 以源码httpd-2.4.33为基础,解压后,执行./configure --prefix=/usr/local/ --sysconfdir=/etc/ ...

  5. 关于PHP性能提升踩过的一些坑

        性能这个东西,在网站规模到达一定程度后,会是一个永恒的主题.关于这方面,本人有一些拙见,现在拿出来,大家一起探讨下.     1.编码过程中,传递参数时,尽量少使用‘引用传参’.这是一个巨坑啊 ...

  6. python基础之反射、面向对象进阶

    isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象,如果是返回True 1 class F ...

  7. docker学习(一） 安装

    一.什么是docker 参见https://baike.baidu.com/item/Docker/13344470?fr=aladdin 个人的理解是,通俗来说,就是相当于一个方便携带且个体独立的虚 ...

  8. Linux/CentOS防CC攻击脚本

    #!/bin/sh cd /var/log/httpd/ cat access_log|awk > a cp /dev/null access_log cp /dev/null error_lo ...

  9. 【APUE】Chapter10 Signals

    Signal主要分两大部分: A. 什么是Signal,有哪些Signal,都是干什么使的. B. 列举了非常多不正确(不可靠)的处理Signal的方式,以及怎么样设计来避免这些错误出现. 10.2 ...

  10. [B2B、B2C、C2C] 区别介绍

    最近在学习建站系统的时候,偶尔我们的老大会说几个自己所不太了解的名词“简称”,所以呢?我就总结了一下,如果有不全面的地方,还请博友们多多指点! B2B B2B(也有写成BTB)是指企业对企业之间的营销 ...