html5 canvas 小试：绘制2次曲线

yiyu

浏览: 186686 次
性别:
来自: 北京

最近访客更多访客>>

彭彪321

webeasymail

dawei1980

akacd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

HTML5 Chrome IE C++C

canvas是html5中新增加的元素，可以用来在html中通过javascript绘制图形，处理图像。
虽然现在html5还没有正式发布，但firefox 3+，chrome 2.0+，safari 4等都已经支持，
ie也可以通过扩展支持该功能

关于canvas的简单介绍可以参看这里，其中有很多很好的链接：
http://en.wikipedia.org/wiki/Canvas_element

html5草稿版中对canvas的定义可以参看这里：
http://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html

Mozilla的相关页面见这里：
https://developer.mozilla.org/en/Canvas_tutorial

其中对ie的扩展有2种，我试用了一下google的：
http://code.google.com/p/explorercanvas/

作为试手，我做了一个画2次曲线的页面，运行效果如下图：

其中可以调整a,b,c三个系数，可以指定横竖坐标轴的最大值，步数指的是横坐标的采样数，
为了保证左右一样，输入值为半边的采样数。
代码如下，我在firefox3.5.8，chrome 5.0， ie8里都跑过，其中ie8要用到google的explorercanvas，
输入值有效性检查之类的一并忽略，呵呵。

<html>

<head>
	<title>learn canvas 001</title>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script type="text/javascript">
		var MAX_WIDTH = 640;
		var MAX_HEIGHT = 480;
		
		function init() {
			var g = getCanvasContext();
			g.translate(MAX_WIDTH/2, MAX_HEIGHT/2);
			
			initGraph();
		}
		
		function initGraph() {
			var g = getCanvasContext();
			g.strokeStyle = 'black';
			if (g) {
				g.clearRect(-MAX_WIDTH/2, -240, MAX_WIDTH, MAX_HEIGHT);
				g.strokeRect(-MAX_WIDTH/2, -240, MAX_WIDTH, MAX_HEIGHT);

				g.beginPath();
				g.moveTo(-MAX_WIDTH/2, 0);
				g.lineTo(MAX_WIDTH/2, 0);
				g.moveTo(0, -MAX_HEIGHT/2);
				g.lineTo(0, MAX_HEIGHT/2);
				g.stroke();
			}
		}
		
		function draw() {
			initGraph();
			
			var maxX = Number(document.getElementById('maxX').value);
			var maxY = Number(document.getElementById('maxY').value);
			var halfStep = Number(document.getElementById('halfStep').value);
			
			var g = getCanvasContext();
			if (g) {
				var x, y;
				var sx, sy;
				var currStep;
				
				sx = -MAX_WIDTH/2
				sy = -MAX_HEIGHT/2 * calculateY(-maxX) / maxY;
				g.beginPath();
				g.moveTo(sx, sy);
				
				for (currStep=-halfStep + 1; currStep<=halfStep; currStep++) {
					x = maxX * currStep / halfStep;
					y = calculateY(x);
					sx = MAX_WIDTH/2 * x / maxX;
					sy = -MAX_HEIGHT/2 * y / maxY;
					g.lineTo(sx, sy);
				}
				g.strokeStyle = 'blue';
				g.stroke();
			}
		}
		
		function calculateY(x) {
			var a = Number(document.getElementById('a').value);
			var b = Number(document.getElementById('b').value);
			var c = Number(document.getElementById('c').value);
			
			var y = a * x * x + b * x + c;
			return y;
		}
		
		function getCanvasContext() {
			var c = document.getElementById('myCanvas');
			if(c && c.getContext) {
				var g = c.getContext('2d');
				return g;
			} else {
				return null;
			}
		}
	</script>
</head>

<body onload="init()">
	<canvas id="myCanvas" width="640" height="480">
		该浏览器不支持Canvas.
	</canvas>
	<p>
	<table>
		<tr>
			<td colspan="2">
				函数 = <input type="text" id="a" size="2" value="1"/> * x * x + <input type="text" size="2" id="b" value="2"/> * x + <input type="text" size="2" id="c" value="3"/>
			</td>
		</tr>
		<tr>
			<td>最大横坐标:</td>
			<td><input type="text" id="maxX" value="10"/></td>
		</tr>
		<tr>
			<td>最大纵坐标:</td>
			<td><input type="text" id="maxY" value="200"/></td>
		</tr>
		<tr>
			<td>二分之一总步数:</td>
			<td><input type="text" id="halfStep" value="20"/></td>
		</tr>
		<tr>
			<td colspan="2"><button name="btnDraw" type="button" onClick="draw()">Draw</button></td>
		</tr>
	</table>
	
</body>

</html>

查看图片附件

分享到：

YUI 3 学习笔记（1）-YUI Global对象 | Cairngorm示例：用户登录

2010-02-23 17:27
浏览 2254
评论(0)
论坛回复 / 浏览 (0 / 5125)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论