http://fd.itedu-g.cn/login.php
]]>
HTML閿氱偣
<a href="#1">goto1</a>
.
.
.
.
<a name="1">111</a>
榪欐牱浠巊oto1鍙互瀹氫綅鍒?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鏄竴縐嶆瘮HTTP鍗忚鏇村姞楂樻晥鐨勭綉緇滀紶杈撳崗璁紝瀹冩湁鏁堝湴鍑忓皯浜咹TTP澶翠腑鐨勫啑浣欎俊鎭拰緗戠粶寤舵椂錛岃兘澶熸彁渚涘鎴風(fēng)-鏈嶅姟鍣ㄥ拰鏈嶅姟鍣?瀹㈡埛绔殑鍙岄氶亾瀹炴椂閫氫俊錛屽悓鏃跺叿鏈夊緢濂界殑瀹夊叏鏈哄埗銆傚熀浜嶹ebSocket鐨刄RL閫氬父浠S://...寮澶達(dá)紝綾諱技浜嶩TTPS錛屽畨鍏ㄧ殑WebSocket榪炴帴URL閫氬父浠SS://...寮澶淬傝瀹炵幇WebSocket閫氫俊錛岄渶瑕佸鎴風(fēng)嫻忚鍣ㄦ敮鎸乄ebSocket錛屾湇鍔″櫒绔篃蹇呴』鏀寔WebSocket銆?/span>
WebSocket榪樺叿鏈夊箍鎾姛鑳斤紝褰撴湁澶氫釜鐩戝惉鑰呰繛鎺ユ椂錛屽箍鎾湇鍔″櫒鍙戦佺殑娑堟伅閮藉彲琚帴鏀跺埌銆?/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鍦―OM涓槸window瀵硅薄鐨勫瓙瀵硅薄錛屽畠鍏鋒湁錛?/span>
•WebSocket(url)鏋勯犲嚱鏁般?/span>
•readyState銆傚彧璇誨睘鎬э紝鍏跺煎彲浠ユ槸CONNECTING錛?錛夛紝OPEN錛?錛夛紝CLOSED錛?錛夈?/span>
•boolean send(in DOMString data)鍜寁oid close()涓や釜鏂規(guī)硶錛屽垎鍒敤浜庡彂閫佹秷鎭拰鍏抽棴WebSocket榪炴帴
•onopen, onmessage, 鍜宱nclosee涓変釜浜嬩歡灞炴э紝鍒嗗埆瀵筼pen, message鍜宑lose涓変釜WebSocket浜嬩歡銆?/span>
3.浣跨敤WebSocket鐨勬楠?/span>
//寤虹珛榪炴帴
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
//浜嬩歡鐩戝惉
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);
}
//鍏抽棴榪炴帴銆備竴鑸儏鍐典笅涓嶅叧闂紝浠ヤ繚鎸佸疄鏃墮氫俊
w.close();
]]>
鍦℉TML5鐨凜anvas涓婄粯鍒舵き鍦嗙殑鍑犵鏂規(guī)硶
姒傝堪
HTML5涓殑Canvas騫舵病鏈夌洿鎺ユ彁渚涚粯鍒舵き鍦嗙殑鏂規(guī)硶錛屼笅闈㈡槸瀵瑰嚑縐嶇粯鍒舵柟娉曠殑鎬葷粨銆傚悇縐嶆柟娉曞悇鏈変紭緙猴紝瑙嗘儏鍐甸夌敤銆傚悇鏂規(guī)硶鐨勫弬鏁扮浉鍚岋細(xì)
context涓篊anvas鐨?D緇樺浘鐜瀵硅薄錛?/span>
x涓烘き鍦嗕腑蹇冩í鍧愭爣錛?/span>
y涓烘き鍦嗕腑蹇冪旱鍧愭爣錛?/span>
a涓烘き鍦嗘í鍗婅醬闀匡紝
b涓烘き鍦嗙旱鍗婅醬闀褲?/span>
鍙傛暟鏂圭▼娉?/span>
璇ユ柟娉曞埄鐢ㄦき鍦嗙殑鍙傛暟鏂圭▼鏉ョ粯鍒舵き鍦?/span>
//-----------鐢ㄥ弬鏁版柟紼嬬粯鍒舵き鍦?--------------------
//鍑芥暟鐨勫弬鏁皒,y涓烘き鍦嗕腑蹇冿紱a,b鍒嗗埆涓烘き鍦嗘í鍗婅醬銆?/span>
//綰靛崐杞撮暱搴︼紝涓嶅彲鍚屾椂涓?
//璇ユ柟娉曠殑緙虹偣鏄紝褰搇ineWidth杈冨錛屾き鍦嗚緝鎵佹椂
//妞渾鍐呴儴闀胯醬绔緝涓哄皷閿愶紝涓嶅鉤婊戯紝鏁堢巼杈冧綆
function ParamEllipse(context, x, y, a, b)
{
//max鏄瓑浜?闄や互闀胯醬鍊糰鍜宐涓殑杈冨ぇ鑰?/span>
//i姣忔寰幆澧炲姞1/max錛岃〃紺哄害鏁扮殑澧炲姞
//榪欐牱鍙互浣垮緱姣忔寰幆鎵緇樺埗鐨勮礬寰勶紙寮х嚎錛夋帴榪?鍍忕礌
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)
{
//鍙傛暟鏂圭▼涓簒 = a * cos(i), y = b * sin(i)錛?/span>
//鍙傛暟涓篿錛岃〃紺哄害鏁幫紙寮у害錛?/span>
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
};
鍧囧寑鍘嬬緝娉?/span>
榪欑鏂規(guī)硶鍒╃敤浜嗘暟瀛︿腑鐨勫潎鍖鍘嬬緝鍘熺悊灝嗗渾榪涜鍧囧寑鍘嬬緝涓烘き鍦嗭紝鐞嗚涓婁負(fù)鑳藉寰楀埌鏍囧噯鐨勬き鍦?涓嬮潰鐨勪唬鐮佷細(xì)鍑虹幇綰垮涓嶄竴鑷寸殑闂錛岃В鍐沖姙娉曠湅5妤約imonleung鐨勮瘎璁恒?/span>
//------------鍧囧寑鍘嬬緝娉曠粯鍒舵き鍦?-------------------
//鍏舵柟娉曟槸鐢╝rc鏂規(guī)硶緇樺埗鍦嗭紝緇撳悎scale榪涜
//妯醬鎴栫旱杞存柟鍚戠緝鏀撅紙鍧囧寑鍘嬬緝錛?/span>
//榪欑鏂規(guī)硶緇樺埗鐨勬き鍦嗙殑杈圭闀胯醬绔秺榪戣秺綺楋紝闀胯醬绔偣鐨勭嚎瀹芥槸姝ｅ父鍊?/span>
//杈圭鐭醬瓚婅繎銆佹き鍦嗚秺鎵佽秺緇嗭紝鐢氳嚦浜х敓闂存柇錛岃繖鏄痵cale瀵艱嚧鐨勭粨鏋?/span>
//榪欑緙虹偣鏌愪簺鏃跺欐槸浼樼偣錛屾瘮濡傚湪琛ㄧ幇鐜殑绔嬩綋鏁堟灉錛堣鏄熷厜鐜級鏃?/span>
//瀵逛簬鍙傛暟a鎴朾涓?鐨勬儏鍐碉紝榪欑鏂規(guī)硶涓嶉傜敤
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//閫夋嫨a銆乥涓殑杈冨ぇ鑰呬綔涓篴rc鏂規(guī)硶鐨勫崐寰勫弬鏁?/span>
var r = (a > b) ? a : b;
var ratioX = a / r; //妯醬緙╂斁姣旂巼
var ratioY = b / r; //綰佃醬緙╂斁姣旂巼
context.scale(ratioX, ratioY); //榪涜緙╂斁錛堝潎鍖鍘嬬緝錛?/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();
};
涓夋璐濆灝?dāng)鏇簿U挎硶涓
涓夋璐濆灝?dāng)鏇簿U跨粯鍒舵き鍦嗗湪瀹為檯緇樺埗鏃舵槸涓縐嶈繎浼鹼紝鍦ㄧ悊璁轟笂涔熸槸涓縐嶈繎浼箋?nbsp;浣嗗洜涓哄叾鏁堢巼杈冮珮錛屽湪璁＄畻鏈虹煝閲忓浘褰㈠涓紝甯哥敤浜庣粯鍒舵き鍦嗭紝浣嗘槸鍏蜂綋鐨勭悊璁烘垜涓嶆槸寰堟竻妤氥?nbsp;榪戜技紼嬪害鍦ㄤ簬涓や釜鎺у埗鐐逛綅緗殑閫夊彇銆傝繖縐嶆柟娉曠殑鎺у埗鐐逛綅緗槸鎴戣嚜宸辮瘯楠屽緱鍑猴紝綺懼害榪樺彲浠?
//---------浣跨敤涓夋璐濆灝?dāng)鏇簿U挎ā鎷熸き鍦?---------------------
//姝ゆ柟娉曚篃浼?xì)漶旂敓褰搇ineWidth杈冨錛屾き鍦嗚緝鎵佹椂錛?/span>
//闀胯醬绔緝?yōu)畺閿愬Q屼笉騫蟲粦鐨勭幇璞?/span>
function BezierEllipse1(context, x, y, a, b)
{
//鍏抽敭鏄痓ezierCurveTo涓袱涓帶鍒剁偣鐨勮緗?/span>
//0.5鍜?.6鏄袱涓叧閿郴鏁幫紙鍦ㄦ湰鍑芥暟涓負(fù)璇曢獙鑰屽緱錛?/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();
};
涓夋璐濆灝?dāng)鏇簿U挎硶浜?/span>
榪欑鏂規(guī)硶鏄粠StackOverFlow涓竴涓笘瀛愮殑鍥炲涓敼鍙樿屾潵錛岀簿搴﹁緝楂橈紝涔熸槸閫氬父鐢ㄦ潵緇樺埗妞渾鐨勬柟娉?
//---------浣跨敤涓夋璐濆灝?dāng)鏇簿U挎ā鎷熸き鍦?---------------------
//姝ゆ柟娉曚篃浼?xì)漶旂敓褰搇ineWidth杈冨錛屾き鍦嗚緝鎵佹椂
//錛岄暱杞寸杈冨皷閿愶紝涓嶅鉤婊戠殑鐜拌薄
//榪欑鏂規(guī)硶姣斿墠涓涓礉濉炲皵鏂規(guī)硶綺劇‘搴﹂珮錛屼絾鏁堢巼紼嶅樊
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // 姘村鉤鎺у埗鐐瑰亸縐婚噺
oy = b * k; // 鍨傜洿鎺у埗鐐瑰亸縐婚噺
ctx.beginPath();
//浠庢き鍦嗙殑宸︾鐐瑰紑濮嬮『鏃墮拡緇樺埗鍥涙潯涓夋璐濆灝?dāng)鏇簿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>
榪欑鏂規(guī)硶鍙互鏍規(guī)嵁Canvas鑳藉鎿嶄綔鍍忕礌鐨勭壒鐐癸紝鍒╃敤鍥懼艦瀛︿腑鐨勫熀鏈畻娉曟潵緇樺埗妞渾銆?nbsp;渚嬪涓偣鐢繪き鍦嗙畻娉曠瓑銆?/span>
鍏朵腑涓涓緥瀛愭槸鍥弸“璞嗚眴鐙?#8221;鐨勪竴綃囧崥鏂?#8220;HTML5 Canvas 鎻愰珮鐝紙涓錛?nbsp;—— 鍏夋爡鍥懼艦瀛︼紙1錛変腑鐐圭敾鍦嗙畻娉?#8221;銆傝繖縐嶆柟娉曠敱浜庢瘮杈?#8220;鍘熷”錛岀伒媧繪уぇ錛屾晥鐜囬珮錛岀簿搴﹂珮錛屼絾瑕佹兂瀹炵幇涓涓湁浣跨敤浠峰肩殑緇樺埗妞渾鐨勫嚱鏁幫紝姣旇緝澶嶆潅銆傛瘮濡傦紝瑕佸綋綰垮鏀瑰彉鏃訛紝綆楁硶灝卞鏉備竴浜涖傝櫧鐒舵槸鐢誨渾鐨勭畻娉曪紝浣嗙敾妞渾鐨勭畻娉曚笌涔嬬被浼鹼紝鍙互鍙傝冧笅銆?/span>
鎬葷粨
鍩烘湰涓婃墍鏈夌殑鏂規(guī)硶閮戒笉鍙兘杈懼埌100%綺劇‘錛屽洜涓哄彈鏄劇ず鍣ㄥ垎杈ㄧ巼鐨勯檺鍒躲?/span>
鍏跺疄鏈濂界殑鏂規(guī)硶搴旇鏄痑rc()+scale()銆俢anvas緇樺浘搴揔ineticJS灝辨槸鐢ㄧ殑榪欑鏂規(guī)硶銆?/span>
鍦ㄥ叾浠栫粯鍥捐蔣浠朵腑錛屼笉鍍廐TML5鐨刢anvas閭ｆ牱鎻愪緵鍥烘湁鐨刟rc()+scale()鏂規(guī)硶錛岄氬父鐢ㄨ礉濉炲皵鏇茬嚎妯℃嫙榪戜技妞渾錛屾棤璁烘槸鍑犳潯璐濆灝?dāng)鏇簿U塊兘鏄繎浼艱屽凡銆傚叧浜庣敤璐濆灝?dāng)鏇簿U挎ā鎷熸き鍦嗭紝鍙互鍙傝冭繖浠借祫鏂欙細(xì)Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves銆?/span>
鐢變簬arc()+scale()鏄祻瑙堝櫒宸茬粡瀹炵幇鐨勬柟娉曪紝鐞嗚涓婄簿搴︽渶楂橈紝鎵浠ヤ粠鏁堢巼銆佺簿紜害鍜岀畝鍗曟槗鐢ㄧ▼搴︿笂鏉ヨ錛岄兘鏄渶浣崇殑銆?/span>
鍦ㄧ敤arc()+scale()緇樺埗瀹屾き鍦嗗悗錛宑ontext.stroke()鍜?nbsp;context.restore()涓や釜鏂規(guī)硶璋冪敤鐨勫厛鍚庨『搴忎笉鍚岋紝浜х敓鐨勭粨鏋滀細(xì)寰堟湁鎰忔濈殑銆傞氬父搴旇鍏坮estore()鍐峴troke()銆?nbsp;
Demo
涓嬮潰鏄櫎鍏夋爡娉曚箣澶栵紝鍑犱釜緇樺埗妞渾鍑芥暟鐨勬紨紺猴紝婕旂ず浠ｇ爜濡備笅錛?/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涓嬬殑綰垮灝忎簬絳変簬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>
娉ㄦ剰錛岃鎴愬姛榪愯浠ｇ爜錛岄渶瑕佹敮鎸丠TML5鐨凜anvas鐨勬祻瑙堝櫒銆?br />
鏈枃杞澆鑷籌細(xì)http://www.cnblogs.com/shn11160/archive/2012/08/27/2658057.html
]]>