HTML5用canvas绘制五星红旗

在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>