Canvas教程 Canvas tutorial之基本用法
2012-02-06 22:41
567 查看
<canvas>元素
让我们从<canvas>元素的定义开始吧。
<canvas>看起来很像<img>,唯一不同就是它不含 src和
alt属性。它只有两个属性,width
和height,两个都是可选的,并且都可以 DOM
或者CSS
来设置。如果不指定width 和 height,默认的是宽300像素,高150像素。虽然可以通过CSS 来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的width
和 height 属性值)。
id属性不是
<canvas>专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其
id值。一般,为元素指定
id是个不错的主意,这样使得在脚本中应用更加方便。[/code]
<canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。[/code]
因为<canvas>相对较新,有些浏览器并没实现,如Firefox 1.0 和 Internet Explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。
在Apple Safari里,
<canvas>的实现跟
<img>很相似,它没有结束标签。然而,为了使
<canvas>能在web的世界里广泛适用,需要给替用内容提供一个容身之所,因此,在Mozilla的实现里结束标签(
</canvas>)是必须的。
如果没有替用内容,
<canvasid="foo" ...></canvas>对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。
如果有替用内容,那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容,因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。
<canvas>创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL
ES 的 3D 上下文。
<canvas>初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的
getContext方法来获取,同时得到的还有一些画图用的函数。
getContext()接受一个用于描述其类型的值作为参数。
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');
上面第一行通过 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();">
<canvasid="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();">
<canvasid="canvas" width="150" height="150"></canvas>
</body>
</html>
相关文章推荐
- HTML5开发 页游/手游动画及游戏系列教程(Game Tutorial):(二)基本动画(canvas先生很忙)
- bootstrap table教程--使用入门基本用法
- 使用Canvas绘制图形的基本教程
- jQuery中的基本选择器用法学习教程
- js模版引擎handlebars.js实用教程——if-判断的基本用法
- Canvas绘图——使用Canvas绘制图形的基本教程
- Python爬虫框架Scrapy基本用法入门教程
- JSP入门教程之客户端验证、常用输出方式及JSTL基本用法
- mac os 利用ssh 搭建git server服务器详细教程,以及git基本用法
- [译]Canvas的基本用法
- [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法
- git实战教程3-基本用法(下)
- Git 教程 - Git 基本用法
- Java基础教程16-String的基本用法
- Redux 入门教程(一):基本用法
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- Redux 入门教程(一):基本用法
- 深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
- iOS中NSInvocation的基本用法教程
- html5 canvas 笔记一(基本用法与绘制图形)