firefox图像创作（搜集整理）

最新推荐文章于 2024-08-29 09:06:42 发布

happyheipi

最新推荐文章于 2024-08-29 09:06:42 发布

阅读量794

点赞数

分类专栏： css 技术 web标准文章标签： firefox 浏览器 safari html javascript mozilla

本文链接：https://blog.csdn.net/happyheipi/article/details/1799708

版权

css 技术同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

web标准

24 篇文章 0 订阅

订阅专栏

FireFox1.5带来的一个新的图像HTML元素： <canvas>，所以的3D画面都是利用<canvas>的API方法完成的。

<canvas>是一个新的可以通过脚本（通常是JavaScript)绘制图像的HTML元素，例如，它可以用来绘制图表、制作简单（或复杂）的动画。右边是一些使用的<canvas>创建的图像的效果图，我们将在后续的文章中看到它们的实现方法。

苹果公司为了其的Mac OS X Dashboard第一次将<canvas>带入到我们眼前，随后苹果公司有将其自主开发的浏览器Safari中实现了<canvas>。Mozilla的基于Gecko 1.8图像引擎的浏览器，如Firefox 1.5都支持这个元素。而<canvas>元素是WhatWG Web applications 1.0即HTML 5规范的一部分。

使用<canvas>元素不是很难，但是您需要对HTML和JavaScript有个基本的了解。

另外，正如前面我们提到的，大部分主流的浏览器都不支持<canvas>元素，所以您需要使用Firefox 1.5、其他基于Gecko引擎的浏览器或者最新版本的Safari浏览器才能够查看示例。

<canvas>元素

让我们从<canvas>元素本身开始我们的介绍。

<canvas id="tutorial" width="150" height="150"></canvas>

<canvas>有点象<img>元素，唯一的不同是它没有src和alt属性，< canvas>元素只有两个属性:width和height。这两个可选属性都通过DOM属性和CSS的方法设置其值。当没有标明宽度和高度属性时，<canvas>默认是300象素宽和150象素高。

虽然<canvas>元素没有明确指出拥有id属性属性，但是因为id属性是默认的应用于任何HTML元素的HTML属性（class也是）。所以为<canvas>指定一个id是一个很好的主意，这样我们就可以在script中更加容易的辨认出并使用它。

<canvas>元素可以象任何普通的图像一样应用样式（margin、border、 background等）。但是这些样式设置并不影响canvas实际的绘制效果。在后续的介绍中我们将知道这是如何发生的，当没有在< canvas>上应用任何样式的时候，其初始化默认是完全透明的。

fallback内容（Fallback content）

因为当前<canvas>元素只被Firefox1.5支持，其他主流的浏览器包括Firefox1.0都没有实现它，所以当浏览器不支持该元素的时候我们需要提供一些fallback信息。

幸运的是这非常的简单直接：我们只需要在canvas元素内部输入替代的内容就可以了。如果浏览器不支持该元素将完全忽略该元素而是显示我们键入的替代内容，否则，将正常显示canvas。

例如，我们可以提供关于canvas内容的一个文本描述或者为动态显示的内容提供一张静态的图像，可能的代码如下：

<canvas id="stockGraph" width="150" height="150">

 current stock price: $3.15 +0.15

</canvas>

<canvas id="clock" width="150" height="150">

 <img src="images/clock.png" width="150" height="150"/>

</canvas>

注意：苹果对<canvas>的实现与规范有些不同，它不认识</canvas>关闭标签。所以在Safari中，所以的fallback内容都将会显示，不过可以通过CSS或者教本来隐藏它。

getContext

如果您创建一个HTML页面并用Firefox打开它，您将看到canvas元素的区域是一片空白，所以我们就需要使用某种方法来或者<canvas>元素实例，这就是我们将要介绍的getContext方法。为了使用绘图函数，每个canvas元素都有一个名称为getContext的DOM方法，getContext只能有一个指明绘图上下文类别（drawing context）参数,当前只有一个context:2d context。以后可能支持3d context但是目前限制为2d context。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

在第1行，我们使用getElementById方法获取canvas DOM 节点，然后我们就可以使用getContext方法访问drawing context了。

在不支持的浏览器中停止执行

与fallback内容一样，当浏览器不支持canvas时我们需要一种方法来阻止我们教本的执行，这可以通过测试getContext方法来很容易的实现。实现的代码片度类似如下：

var canvas = document.getElementById('canvas');
if (canvas.getContext){

 var ctx = canvas.getContext('2d');
 // drawing code here

}

所有的绘图代码都应该放置在if语句里面，所以当浏览器不支持<canvas>时，它将不运行它。

以下是一个应用canvas的标准模版文件：

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