canvas教程

利用html5 canvas 画图的一个例子

字号+ 作者:H5之家 来源:H5之家 2017-08-04 16:00 我要评论( )

下面给一个利用html5 canvas 画图的一个例子的源代码: !DOCTYPE !DOCTYPE htmlhtmlheadtitleTest Canvas/title/headbodycanvas id =myCanvas width=400 height=400 style=border:1px solid #d3d3d3Your browser does not support the HTML5 canvas tag/canv

下面给一个利用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>


大家跑上面的例子,画出的是什么图形?

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • openCanvas 电脑画图手绘软件下载 v6.2.06 绿色版

    openCanvas 电脑画图手绘软件下载 v6.2.06 绿色版

    2017-08-04 16:00

  • HTML5 CANVAS画图 beginPath和closeP

    HTML5 CANVAS画图 beginPath和closeP

    2017-08-04 15:03

  • Canvas学习:自定义的坐标变换

    Canvas学习:自定义的坐标变换

    2017-08-04 13:02

  • canvas学习笔记(二):绘制图形

    canvas学习笔记(二):绘制图形

    2017-08-04 13:00

网友点评
a