HTML5中的Canvas绘图操作(一)

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



你可能感兴趣的:(HTML5中的Canvas绘图操作(一))