HTML5新元素之Canvas详解（1）

来源：互联网发布：网络舆情监控机制编辑：程序博客网时间：2024/05/10 15:55

<canvas>元素定义：

替代内容：很多不支持HTML5的浏览器，如果那些浏览器打开含有<canvas>标签页面，并不能显示canvas内容，这里可以加入替代内容，用以提示用户升级浏览器。提示内容直接作为元素内容写在元素内：如下：

你的浏览器不支持canvas，请升级浏览器

</canvas>

注意：结束标签</canvas>是必须的

渲染上下文：

<canvas>创建的固定尺寸的绘图画面开发了一个或多个渲染上下文（rendering context），我们可以通过他们来控制要显示的内容。现在只支持2d，将来会支持3d。代码如下：

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

下面给出一个使用canvas的简单HTML模板：

<html>  <head>    <title>Canvas tutorial</title>    <script type="text/javascript">      function draw(){        var canvas = document.getElementById('tutorial');        if (canvas.getContext){          var ctx = canvas.getContext('2d');        }      }    </script>    <style type="text/css">      canvas { border: 1px solid black; }    </style>  </head>  <body onload="draw();">    <canvas id="tutorial" width="150" height="150"></canvas>  </body></html>

再看一个简单的例子：

绘制两个交错的矩形：

<html> <head>  <script type="application/x-javascript">    function draw() {      var canvas = document.getElementById("canvas");      if (canvas.getContext) {        var ctx = canvas.getContext("2d");        ctx.fillStyle = "rgb(200,0,0)";        ctx.fillRect (10, 10, 55, 50);        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";        ctx.fillRect (30, 30, 55, 50);      }    }  </script> </head> <body onload="draw();">   <canvas id="canvas" width="150" height="150"></canvas> </body></html>