html5 canvas 小试：绘制2次曲线
 |
yiyu
2010-02-23
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>
此文章带有附件,请前往http://www.iteye.com/topic/600918下载 |
