入了解canvas标签（1）——基本用法

最新推荐文章于 2022-03-17 19:21:41 发布

load_life

最新推荐文章于 2022-03-17 19:21:41 发布

阅读量541

点赞数

分类专栏： html5 文章标签： safari 浏览器 mozilla css 脚本 internet

html5 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

让我们从<canvas>元素的定义开始吧。

Code:

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

看起来很像<img>，唯一不同就是它不含 src 和 alt属性。它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。如果不指定width 和height，默认的是宽300像素，高150像素。虽然可以通过 CSS来调整canvas的大小，但渲染图像会缩放来适应布局的（如果你发现渲染结果看上去变形了，不必一味依赖CSS，可以尝试显式指定canvas的width和 height 属性值）。

id属性不是<canvas>专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其id 值。一般，为元素指定 id 是个不错的主意，这样使得在脚本中应用更加方便。

<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式，canvas默认是全透明的。

替用内容

因为 <canvas>相对较新，有些浏览器并没实现，如Firefox1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

Code:

<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> 是必须的

在AppleSafari里，<canvas>的实现跟<img>很相似，它并不没有结束标签。然而，为了使<canvas>能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(</canvas>)是必须的。

如果没有替用内容，<canvas id="foo"...></canvas> 对 Safari和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。

如果有替用内容，那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容，因为那些替用内容是需要在 IE 里显示但不需要在Safari 里显示。

渲染上下文

<canvas>创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（renderingcontext），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGLES 的 3D 上下文。

<canvas>初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的getContext 方法来获取，同时得到的还有一些画图用的函数。getContext()接受一个用于描述其类型的值作为参数。

Code:

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

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其getContext方法取得其画图操作上下文。

检查浏览器的支持

除了在那些不支持的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas。方法很简单，判断 getContext是否存在即可。

Code:

var canvas = document.getElementById_x('tutorial'); if (canvas.getContext){
var ctx = canvas.getContext('2d'); // drawing code here } else {
// canvas-unsupported code here }

代码模板

我们会用下面这个最简化的代码模板来（后续的示例需要用到）作为开始。

Code:

<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，或者其他事件处理函数中被调用。

一个简单的例子

作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。

观看示例

Code:

<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>
<canvas id="tutorial" width="150" height="150">
</canvas>
</body>
</html>

load_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入了解canvas标签（1）——基本用法

让我们从元素的定义开始吧。Code:canvas id="tutorial" width="150" height="150">canvas> 看起来很像，唯一不同就是它不含 src 和 alt属性。它只有两个属性，width 和 hei
复制链接

扫一扫