利用html5 canvas 畫圖的一個例子
下面給一個利用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>
大家跑上面的例子,畫出的是什麼圖形?
相關文章
- html5畫布canvasHTMLCanvas
- Android 利用 Canvas 畫畫板AndroidCanvas
- 用HTML5的canvas畫太陽系HTMLCanvas
- canvas畫圖採坑Canvas
- 用 Canvas + WASM 畫一個迷宮CanvasASM
- 用canvas畫一個進度盤Canvas
- 用canvas畫一個七竅板Canvas
- 超酷的HTML5 Canvas網路畫板教程HTMLCanvas
- Canvas畫圖-一個比想象中更騷氣的圓(漸變圓環)Canvas
- Canvas畫圖-滑鼠塗鴉Canvas
- 用canvas實現一個簡單的畫板Canvas
- 我的開發環境介紹及一個 Expression Bland 畫圖形的例子開發環境Express
- Canvas 畫圖 - 滑鼠移動圖形Canvas
- 一個少女心滿滿的例子帶你入門 CanvasCanvas
- 利用ArcGIS 構建模型的一個經典例子模型
- 一個利用遊標返回資料集的例子
- HTML5利用canvas,把多張圖合併成一張圖片HTMLCanvas
- html5中canvas元素建立畫布介紹HTMLCanvas
- 如何抓取canvas畫布中的圖片Canvas
- canvas畫圖程式碼例項Canvas
- HTML5 canvas圖片爆炸特效HTMLCanvas特效
- jquery用jqplot外掛畫圖例子jQuery
- 畫影圖形: SVG & Canvas 圖形對比SVGCanvas
- tkinter Canvas畫圖片大坑總結Canvas
- 推薦18個基於HTML5 Canvas 開發的圖表庫HTMLCanvas
- 數百個 HTML5 例子學習 HT 圖形元件 – 拓撲圖篇HTML元件
- HTML5使用canvas繪製圖形HTMLCanvas
- HTML5利用canvas繪製矩形程式碼例項HTMLCanvas
- Canvas+Socket搞出一個多人遊玩的“我畫你猜”Canvas
- HTML5的CanvasHTMLCanvas
- 一個好用的畫圖工具 excalidraw
- CSS的力量:用一個DIV畫圖CSS
- 利用 canvas 實現圖片壓縮Canvas
- 利用分層優化 HTML5 畫布渲染優化HTML
- canvas畫素畫板Canvas
- ## H5 canvas畫圖白板踩坑H5Canvas
- ECharts:基於HTML5 Canvas的JavaScript圖表庫EchartsHTMLCanvasJavaScript
- HTML5全屏的例子HTML