HTML5新元素之Canvas详解（1）

最新推荐文章于 2023-02-07 08:35:15 发布

孤风侠尘

最新推荐文章于 2023-02-07 08:35:15 发布

阅读量2.3k

点赞数

分类专栏： HTML5+CSS3 文章标签： html5 浏览器 function html border

本文链接：https://blog.csdn.net/wustrive_2008/article/details/7348278

版权

HTML5+CSS3 专栏收录该内容

4 篇文章

订阅专栏

<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 οnlοad="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 οnlοad="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>