http://fd.itedu-g.cn/login.php
]]>
HTML锚点
<a href="#1">goto1</a>
.
.
.
.
<a name="1">111</a>
q样从goto1可以定位?11
JSP锚点
<a href="javascript:void(0)" onclick="document.getElementById('1').scrollIntoView();">goto1</a>
?/p>
?/p>
?/p>
<a id="1">1111</a>
]]>
http://www.htm2pdf.co.uk/
]]>
http://www.miniui.com/demo/#src=messagebox.html
]]>
WebSocket是一U比HTTP协议更加高效的网l传输协议，它有效地减少了HTTP头中的冗余信息和|络延时Q能够提供客L-服务器和服务?客户端的双通道实时通信Q同时具有很好的安全机制。基于WebSocket的URL通常以WS://...开_cM于HTTPSQ安全的WebSocketq接URL通常以WSS://...开头。要实现WebSocket通信Q需要客L览器支持WebSocketQ服务器端也必须支持WebSocket?/span>
WebSocketq具有广播功能，当有多个监听者连接时Q广播服务器发送的消息都可被接收到?/span>
2.览器支持检?/span>
function loadDemo()
{
if (window.WebSocket)
{
document.getElementById("support").innerHTML = "HTML5 WebSocket is supported in your browser.";
} else
{
document.getElementById("support").innerHTML = "HTML5 WebSocket is not supported in your browser.";
}
}
3.WebSocket对象
WebSocket在DOM中是window对象的子对象Q它hQ?/span>
•WebSocket(url)构造函数?/span>
•readyState。只d性，其值可以是CONNECTINGQ?Q，OPENQ?Q，CLOSEDQ?Q?/span>
•boolean send(in DOMString data)和void close()两个ҎQ分别用于发送消息和关闭WebSocketq接
•onopen, onmessage, 和onclosee三个事g属性，分别对open, message和close三个WebSocket事g?/span>
3.使用WebSocket的步?/span>
//建立q接
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
//事g监听
w.onopen = function() {
log("open"); w.send("thank you for accepting this websocket request");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
//发送消?/span>
document.getElementById("sendButton").onclick = function() {
w.send(document.getElementById("inputMessage").value);
}
//关闭q接。一般情况下不关闭，以保持实旉信
w.close();
]]>
在HTML5的Canvas上绘制椭圆的几种Ҏ
概述
HTML5中的Canvasq没有直接提供绘制椭圆的ҎQ下面是对几U绘制方法的ȝ。各U方法各有优~，视情况选用。各Ҏ的参数相同：
context为Canvas?Dl图环境对象Q?/span>
x为椭圆中心横坐标Q?/span>
y为椭圆中心纵坐标Q?/span>
a为椭圆横半u长，
b为椭圆纵半uѝ?/span>
参数方程?/span>
该方法利用椭圆的参数方程来绘制椭?/span>
//-----------用参数方E绘制椭?--------------------
//函数的参数x,y为椭圆中心；a,b分别为椭圆横半u?/span>
//U半轴长度，不可同时?
//该方法的~点是，当lineWidth较宽Q椭圆较扁时
//椭圆内部长u端较为尖锐，不^滑，效率较低
function ParamEllipse(context, x, y, a, b)
{
//max是等?除以长u值a和b中的较大?/span>
//i每次循环增加1/maxQ表C度数的增加
//q样可以使得每次循环所l制的\径（弧线Q接q?像素
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘?/span>
for (var i = 0; i < 2 * Math.PI; i += step)
{
//参数方程为x = a * cos(i), y = b * sin(i)Q?/span>
//参数为iQ表C度敎ͼ弧度Q?/span>
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
};
均匀压羃?/span>
q种Ҏ利用了数学中的均匀压羃原理圆q行均匀压羃为椭圆，理论上ؓ能够得到标准的椭?下面的代码会出现U宽不一致的问题Q解军_法看5楼simonleung的评论?/span>
//------------均匀压羃法绘制椭?-------------------
//其方法是用arcҎl制圆，l合scaleq行
//横u或纵轴方向羃放（均匀压羃Q?/span>
//q种Ҏl制的椭圆的边离长u端越q越_，长u端点的线宽是正常?/span>
//边离短u近、椭圆越扁越l，甚至产生间断Q这是scaleD的结?/span>
//q种~点某些时候是优点Q比如在表现环的立体效果Q行星光环）?/span>
//对于参数a或b?的情况，q种Ҏ不适用
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//选择a、b中的较大者作为arcҎ的半径参?/span>
var r = (a > b) ? a : b;
var ratioX = a / r; //横u~放比率
var ratioY = b / r; //Uu~放比率
context.scale(ratioX, ratioY); //q行~放Q均匀压羃Q?/span>
context.beginPath();
//从椭圆的左端点开始逆时针绘?/span>
context.moveTo((x + a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.restore();
};
三次贝塞曲U法一
三次贝塞曲U绘制椭圆在实际l制时是一U近|在理Z也是一U近伹{?nbsp;但因为其效率较高Q在计算机矢量图形学中，常用于绘制椭圆，但是具体的理论我不是很清楚?nbsp;q似E度在于两个控制点位|的选取。这U方法的控制点位|是我自p验得出，_ֺq可?
//---------使用三次贝塞曲U模拟椭?---------------------
//此方法也会生当lineWidth较宽Q椭圆较扁时Q?/span>
//长u端较锐Q不qx的现?/span>
function BezierEllipse1(context, x, y, a, b)
{
//关键是bezierCurveTo中两个控制点的设|?/span>
//0.5?.6是两个关键系敎ͼ在本函数中ؓ试验而得Q?/span>
var ox = 0.5 * a,
oy = 0.6 * b;
context.save();
context.translate(x, y);
context.beginPath();
//从椭圆纵轴下端开始逆时针方向绘?/span>
context.moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b);
context.closePath();
context.stroke();
context.restore();
};
三次贝塞曲U法?/span>
q种Ҏ是从StackOverFlow中一个帖子的回复中改变而来Q精度较高，也是通常用来l制椭圆的方?
//---------使用三次贝塞曲U模拟椭?---------------------
//此方法也会生当lineWidth较宽Q椭圆较扁时
//Q长轴端较尖锐，不^滑的现象
//q种Ҏ比前一个贝塞尔Ҏ_度高Q但效率E差
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 水^控制点偏U量
oy = b * k; // 垂直控制点偏U量
ctx.beginPath();
//从椭圆的左端点开始顺旉l制四条三次贝塞曲U?/span>
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();
};
光栅?/span>
q种Ҏ可以ҎCanvas能够操作像素的特点，利用囑Ş学中的基本算法来l制椭圆?nbsp;例如中点L圆算法等?/span>
其中一个例子是园友“豆豆?#8221;的一博?#8220;HTML5 Canvas 提高班（一Q?nbsp;—— 光栅囑Ş学（1Q中点画圆算?#8221;。这U方法由于比?#8220;原始”Q灵zL大Q效率高Q精度高Q但要想实现一个有使用价值的l制椭圆的函敎ͼ比较复杂。比如，要当U宽改变Ӟ法复杂一些。虽然是d的算法，但画椭圆的算法与之类|可以参考下?/span>
ȝ
基本上所有的Ҏ都不可能辑ֈ100%_Q因为受昄器分辨率的限制?/span>
其实最好的Ҏ应该是arc()+scale()。canvasl图库KineticJS是用的q种Ҏ?/span>
在其他绘图Y件中Q不像HTML5的canvas那样提供固有的arc()+scale()ҎQ通常用贝塞尔曲线模拟q似椭圆Q无论是几条贝塞曲UK是近D已。关于用贝塞曲U模拟椭圆，可以参考这份资料：Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves?/span>
׃arc()+scale()是浏览器已经实现的方法，理论上精度最高，所以从效率、精度和简单易用程度上来讲Q都是最佳的?/span>
在用arc()+scale()l制完椭圆后Qcontext.stroke()?nbsp;context.restore()两个Ҏ调用的先后顺序不同，产生的结果会很有意思的。通常应该先restore()再stroke()?nbsp;
Demo
下面是除光栅法之外，几个l制椭圆函数的演C，演示代码如下Q?/span>
<div id="CanvasWrap" style=" background:#fff; width: 600px; height: 600px; border: 1px solid black;"></div>
<script type="text/javascript">// <![CDATA[
var canvas,
context;
var div = document.getElementById("CanvasWrap");
div.innerHTML = "";
canvas = document.createElement("canvas");
canvas.style.width = "600px"
canvas.style.height = "600px"
canvas.width = 600;
canvas.height = 600;
context = canvas.getContext("2d");
div.appendChild(canvas);
function execDraw()
{
//解决Chrome下的U宽于{于1的问?/span>
context.lineWidth = 1.1;
context.strokeStyle="black"
ParamEllipse(context, 130, 80, 50, 50); //?/span>
ParamEllipse(context, 130, 80, 100, 20); //椭圆
EvenCompEllipse(context, 130, 200, 50, 50); //?/span>
EvenCompEllipse(context, 130, 200, 100, 20); //椭圆
BezierEllipse1(context, 470, 80, 50, 50); //?/span>
BezierEllipse1(context, 470, 80, 100, 20); //椭圆
BezierEllipse2(context, 470, 200, 50, 50); //?/span>
BezierEllipse2(context, 470, 200, 100, 20); //椭圆
//相似?重合的程?
ParamEllipse(context, 300, 450, 250, 50);
context.strokeStyle = "yellow";
BezierEllipse1(context, 300, 450, 250, 50);
context.strokeStyle = "blue";
BezierEllipse2(context, 300, 450, 250, 50);
};
function clearCavnas()
{
context.clearRect(0, 0, 600, 600);
};
// ]]></script>
<p>
<br />
<button onclick="execDraw();" type="button">执行</button>
<button onclick="clearCanvas();" type="button">清理</button>
</p>
注意Q要成功q行代码Q需要支持HTML5的Canvas的浏览器?br />
本文转蝲臻Ihttp://www.cnblogs.com/shn11160/archive/2012/08/27/2658057.html
]]>