您的位置：首页 > Web前端 > HTML5

HTML5中的Canvas绘图操作（一）

2012-08-19 10:08 381 查看

这一章的教程资源来自于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航