利用html5 canvas 畫圖的一個例子

pengfoo發表於2014-04-29
原文網址 : https://blog.csdn.net/coolingcoding/article/details/24735327
HTMLCanvas

下面給一個利用html5 canvas 畫圖的一個例子的原始碼：

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
	<title>Test Canvas</title>
</head>
<body>
<canvas id ="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag</canvas>
<script type="text/javascript">

	var jsonObj = [{"p":"066089067089067090068090072093077100079104080108082114084122085130087143088149089162090170090178090179090180"},{"p":"083100083100084100084100085098090096102091107088112086117084124083133082136083141084146091147093148097148102147117144130143135140147138156137161136165136167135169135170"},{"p":"086131086131088131095129107126112124114123120121122120124120127119129119131118132119"},{"p":"098172098172103170114166123163127162130161134160135159136158"},{"p":"115058115058115062114074113081113085113096113104113108113118113132114145114157114169116186115198115204114211114217113218113219113219"},{"p":"157062157062158062160062164062180060184058191057194056198056204055207054210054212055212056210058198070189079184082180086174091172094168096162102160103158105158106158106158106160106168106179105186104196103203103207103215105219106224110226116227122228132227144224155220167217178216181213189210194206204205206203208202210199212196213195212189209180198177194"},{"p":"173117173118172118170122166131165133163137160141158144155148149156147159144165142168142168"},{"p":"207120207120206122205127200138197142188152184157180161174168169173163180158184148194140201137204136204134205134206"},{"p":"066089067089067090068090072093077100079104080108082114084122085130087143088149089162090170090178090179090180"},{"p":"083100083100084100084100085098090096102091107088112086117084124083133082136083141084146091147093148097148102147117144130143135140147138156137161136165136167135169135170"},{"p":"086131086131088131095129107126112124114123120121122120124120127119129119131118132119"},{"p":"098172098172103170114166123163127162130161134160135159136158"},{"p":"115058115058115062114074113081113085113096113104113108113118113132114145114157114169116186115198115204114211114217113218113219113219"},{"p":"157062157062158062160062164062180060184058191057194056198056204055207054210054212055212056210058198070189079184082180086174091172094168096162102160103158105158106158106158106160106168106179105186104196103203103207103215105219106224110226116227122228132227144224155220167217178216181213189210194206204205206203208202210199212196213195212189209180198177194"},{"p":"173117173118172118170122166131165133163137160141158144155148149156147159144165142168142168"},{"p":"207120207120206122205127200138197142188152184157180161174168169173163180158184148194140201137204136204134205134206"}];

	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");
	ctx.strokeStyle = "red";

	for (var i = 0; i < jsonObj.length; i++) {
		var strokePointStr = jsonObj[i];
		ctx.beginPath();
		var firstX = strokePointStr.p.substr(0, 3);
        var firstY = strokePointStr.p.substr(3, 3);
        ctx.moveTo(firstX , firstY);
        var count = (strokePointStr.p.length) / (3 * 2);
        for (var j = 0; j <count; j++) {
        	firstX = strokePointStr.p.substr(j * 3 * 2, 3);
            firstY = strokePointStr.p.substr(j * 3 * 2 + 3, 3);
            ctx.lineTo(firstX, firstY);
        };
        ctx.stroke();

	};

	
</script>

</body>
</html>


大家跑上面的例子，畫出的是什麼圖形？

相關文章