这一章的教程资源来自于Lynda.com.HTML5.Graphics.and.Animation.with.Canvas。
本节主要介绍几个HTML5中的Canvas实际使用案例。
1)我们去canvasmol可以看到非常炫的动态展示的分子结构图;
2)我们去raphaeljs.com能够得到一个js库,能够实现非常多的特效效果,包括文字、图片、波形、渐变。。。;
3)去The Wilderness Downtown能够得到一段互动的电影。。。这货真的不是flash。。。;
4)有了sketchpad可以想象,以后ps直接在云端了;
5)Pirates Love Daisies就简单了,直接是个游戏,以后玩Flash游戏?no, no,咱直接上浏览器,插件都不需要了(实际上目前已经有很多好玩的HTML5游戏了);
好了说到这里我们需要介绍一下Canvas:
1)HTML5提供了一个Canvas对象,用来绘制各种图形界面:各种形状、图片、文字等;
2)Canvas目前主流的浏览器基本都支持(额,IE 需要9以上);
3)不支持Canvas对象的浏览器将会显示一个空的内容;
4)一个页面里面可以包含多个Canvas,他们可以通过“层”的概念实现互相覆盖;
5)Canvas里面的内容通过js脚本完成;
6)Canvas很擅长用来绘制动态展现的内容,但canvas里面的内容并不是页面的一部分;
ok,下面我们来看一个简单的例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#testCanvas {
border: dotted 3px black;
background-color: lightGray;
}
</style>
</head>
<body>
<canvas id="testCanvas" width="400" height="300">
Your Browser does not support Canvas.
</canvas>
</body>
</html>
同样可以通过js设置Canvas属性:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#testCanvas {
border: dotted 3px black;
background-color: lightGray;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('testCanvas');
theCanvas.width = 150;
theCanvas.height = 150;
}
</script>
</head>
<body>
<canvas id="testCanvas" width="400" height="300">
Your Browser does not support Canvas.
</canvas>
</body>
</html>
在Canvas上绘制2D平面图形时可以使用:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#testCanvas {
border: dotted 3px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('testCanvas');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "lightGray";
ctx.fillRect(100,0, ctx.canvas.width, ctx.canvas.height);
}
}
}
</script>
</head>
<body>
<canvas id="testCanvas" width="400" height="300">
Your Browser does not support Canvas.
</canvas>
</body>
</html>