html5 canvas 小试：绘制2次曲线

yiyu · 发表于 2013-1-29 13:55:09

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><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/2sy = -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 ><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" >Draw</button></td></tr></table></body></html>

		自动登录	找回密码
密码			立即注册