HTML5 canvas 元素详细教程一：基本用法。
<canvas>是Html5中一个全新的元素，它可以被JavaScript语言用来绘制图形。最先<canvas>是在苹果公司的Mac OS X Dashboard上被引入，他被应用于Safari，而后基于Gecko1.8的浏览器，也支持这个新的元素，例如Firefox浏览器。如今，<canvas>元素已是HTML5标准规范的一部分。
<canvas>能做什么，我们都将通过本教程向大家讲解，并且可以作为你应用<canvas>的起点。学习<canvas>元素并不困难，只需要具有HTML和JavaScript的基础知识，还要Firefox浏览器，Safari最新版或者Opera9+,这样才能看到所有的示例效果。
现在我们就从如何定义<canvas>元素开始吧。
|
<canvas id="tutorial" width="150" height="150"></canvas>
|
<canvas>元素只有两个属性Width和Height，这些属性都是可选的，并且可以使用DOM或css来控制。如果不设置width和height，则使用默认的宽300像素，高150像素。虽然可以通过css来控制和调整<canvas>的大小，但是渲染图像会进行缩放来适应布局，一旦发现渲染结果看上去变形，不必非要依赖css，你可以通过在<canvas>中显示的指定width和height的值。就像标准的HTML标签一样，也可以定义id属性，这样可以使得脚本应用更加方便。<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。
因为该元素相对较新，并不是所有的浏览器都支持该元素，所我们要为那些不能正常浏览的提供替用的显示信息，它可以使用文本也可以使用图片：
|
<canvas id="stockGraph" width="150" height="150">
您的浏览器不支持<canvas>元素。
</canvas>
|
|
<canvas id="clock" width="150" height="150">
<img src="images.png" width="150" height="150" alt="替换图片"/>
</canvas>
|
在Apple Safari里，<canvas>的实现跟<img>很相似，它没有结束标签。然而，为了使<canvas> 能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(</canvas>)是必须的。如果没有替用内容，<canvas id="foo" ...></canvas> 对Safari 和Mozilla 是完全兼容的——Safari 会简单地忽略结束标签。如果有替用内容，那么可以用一些CSS 技巧来为并且仅为Safari 隐藏替用内容，因为那些替用内容是需要在IE 里显示但不需要在Safari 里显示。
<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文，通过它们可以来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的3D渲染。
|
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
|
我们来讲解下上面的代码，<canvas> 初始化是空白的，要使用脚本画图首先需要渲染上下文（rendering context），它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。getContext() 接受一个用于描述其类型的值作为参数。上面第一行通过getElementById 方法取得canvas 对象的DOM 节点。然后通过其getContext 方法取得其画图操作上下文。并且我们还可以使用脚本的方式判断浏览器对<canvas>的支持，即判断getContext是否存在。
|
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
|
我们用下面最简单的模板作为开始，你可以复制他们到本地备用。
|
<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透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。
|
<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元素是HTML5标准的一部分，通过JavaScript API提供了强大的2D绘图功能，使得网页开发者无需依赖Flash或其他插件就能实现复杂的图形渲染。 在HTML5 Canvas基础教程中，通常会涵盖以下几个关键知识点： 1. **...
HTML5 Canvas 初级入门教程 HTML5 Canvas 是 HTML5 中一个非常重要的功能，它允许开发者在浏览器中绘制图形，而不需要使用任何插件。这个功能可以在所有现代浏览器中使用，包括 Internet Explorer 9、Safari 3、...
Canvas元素是HTML5标准的一部分，通过JavaScript编程接口，开发者可以实现各种复杂的2D图形和动画效果。 Canvas的基础使用始于创建一个HTML元素： ```html <canvas id="myCanvas" width="500" height="500"></...
HTML5 Canvas 教程 canvas 是 HTML5 中一个新的用于通过脚本（通常是 JavaScript）绘图的元素。它可以用于绘图、制作图片的组合或者简单的动画。 Canvas 提供了一个名为 2D API 的编程接口，允许开发者使用 ...
### Html5 Canvas史上最全面的教程 #### 基础篇：了解HTML5 Canvas的基本概念与用法 HTML5 Canvas是一个非常强大的工具，它允许开发者直接在网页上进行绘图操作，而无需借助任何插件或外部库。Canvas的出现极大地...
HTML 5 的 canvas 元素是网页开发中的一个重要特性，它允许开发者通过 JavaScript 动态地在网页上绘制图形。canvas 提供了一个二维绘图环境，即 2D context，这个环境就像是一个画板，开发者可以在这个画板上进行...
Canvas 元素是 WhatWG Web applications 1.0（又称为 HTML 5）规范的一部分。使用 Gecko 1.8 的浏览器，如 Firefox 1.5，也支持了这个新元素。 canvas 元素可以像普通影像一般套用样式（边距、边框、背景等）。这些...
### HTML5 Canvas 教程详解 #### 一、HTML5 Canvas 基础篇 **1.1 HTML5 Canvas 元素** HTML5中的`<canvas>`元素是一种用于图形渲染的容器，它允许开发者通过JavaScript在网页上动态绘制图形。与普通的HTML元素如`...
Canvas元素允许开发者通过JavaScript代码直接在浏览器中绘制2D图像，为网页应用带来了丰富的交互性和创新性。本核心教程由David Geary撰写，并由爱飞翔翻译，被业界公认为该领域的权威著作。 1. **Canvas基本概念**...
同时，Canvas元素支持鼠标和触摸事件，可以响应用户的交互。 7. 高级技术： - 图像数据：`getImageData()`和`putImageData()`可以访问和修改像素级别的图像数据。 - 矩阵变换：使用`translate()`, `rotate()`, `...
HTML5 Canvas 是一种在网页上进行动态图形绘制的技术，它是HTML5标准的一部分，允许开发者使用JavaScript来创建和修改2D图形。这个初级入门教程主要涵盖了Canvas的基本概念、使用方式以及一些基本的绘图操作。 首先...
Canvas元素在HTML5中被引入，它提供了一个空白画布，开发者可以在其上进行创作，从而极大地拓展了网页设计和开发的可能性。 #### 二、Canvas基础知识：元素结构与属性 Canvas元素的基本结构非常简单，与常见的`...
在这个"HTML5 canvas仿屏保动态管道"项目中，我们利用canvas元素来模仿经典的Windows屏保——动态管道效果。 首先，让我们了解HTML5 canvas的基础。canvas是一个HTML元素，它提供了一个画布，可以在这个画布上通过...
“玩转html5canvas画图 - TimeLangoliers - 博客园.htm”可能是该教程的一部分，可能包含了作者TimeLangoliers对于Canvas的一些实践经验和示例代码。博客园_files目录下可能包含与博客文章相关的图片或辅助文件。 ...
二、Canvas元素 在HTML中，使用`<canvas>`标签创建一个画布。可以为其设置宽高属性，如`width`和`height`，并可以通过ID选择器在JavaScript中引用它。 ```html <canvas id="myCanvas" width="500" height="500"></...
HTML5 Canvas教程是Web开发领域中的一个重要组成部分，它允许开发者在网页上进行动态图形绘制，无需依赖外部插件。Canvas是HTML5标准引入的一个新特性，通过JavaScript API，开发者可以直接在浏览器上创建丰富的2D...
### HTML5 Canvas 入门教程 #### 一、引言 HTML5 Canvas 是一个非常强大的功能，它允许开发者使用 JavaScript 在网页上绘制图形。Canvas 的出现极大地扩展了 Web 应用程序的可能性，使得动态和交互式的图形成为...