html5 canvas 小试：绘制2次曲线

最新推荐文章于 2021-07-30 08:30:00 发布

chinabluedolphin

最新推荐文章于 2021-07-30 08:30:00 发布

阅读量237

点赞数

分类专栏： javascript 文章标签： HTML5 Chrome IE C++ C

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

[img]http://dl.iteye.com/upload/attachment/208425/72df5f1b-3450-37d8-b4d2-c344b657b757.jpg[/img]

其中可以调整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>