这一章的教程资源来自于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>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
