firefox图像创作(搜集整理)

原创 2007年09月25日 11:57:00
      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>元素不是很难,但是您需要对HTMLJavaScript有个基本的了解。

另外,正如前面我们提到的,大部分主流的浏览器都不支持<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 onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>

</body>

</html>

如果你查看以上脚本,你会发现我们创建了一个draw函数,该函数在页面导入完成后将立刻执行(通过body标签的onload方法)。您也可以使用setTimeout、setInterval或者任何与页面导入事件一样长的其他的事件处理函数中调用它。

以上所讲的是用firefox画图的基础。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

OPENCV用户手册之图像处理(网络资料搜集整理)

使用扩展 Sobel 算子计算一阶、二阶、三阶或混合图像差分 void cvSobel( const CvArr* src, CvArr* dst, int xorder, int yorder, ...

C#获取本机IP搜集整理7种方法

① 1 private void GetIP() 2 { 3 string hostName = Dns.GetHostName();//本机名 4 /...

我思故我在系列—数据结构面试题(题目搜集整理者V_JULY_V,非常感谢!)

勤奋从来都不是令人愉快的享受,而是征服困难的挑战。而取得成功却能带给人们幸福快乐的享受。但是,没有勤奋就不可能有征服,不经过勤奋的征服,就没有真正的快乐。

wpf 搜集整理demo源码

  • 2015-12-17 16:50
  • 36.01MB
  • 下载

搞学术必备常识及利器搜集整理

Journal Magazine Transactions Proceedings IEEE文章 转载自Journal期刊:刊登关于某特殊主题的文章的期刊Magazine杂志:综合性内容的期刊Tran...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)