淘豆网网友dadad近日为您收集整理了关于基于HTML5 canvas绘图技术研究.pdf的文档，希望对您的工作和学习有所帮助。以下是文档介绍：1W3C()HTML1028HTML5(mendation)。,HTML51999HTML?4.01XHTML?1.0html,,。HTML5,Web,Canvas,,(SVG)(MathML),(Ruby),Web,[1]。CanvasSafari,MacOSXWebKit(dashboardwidget),HTML5Canvas,webwebSVG、VML,XML,Web。HTML5Canvas。(JavaScript)Canvas(),。,,,,,[2]。HTML5,。HBuilderHTML5Canvas。2HBuilderwindows,Webstorm、Brackets、Dreamweaver、MicrosoftVisualStudio2008/2012IDE()。HTML5,HBuilder、WebstormBrackets。Hbuilder()DCloud()HTML5WebIDE,。,HbuilderforwindowsHBuilder6.1.3.201507202206,。DCloudW3CHTML5。DCloudCEO,“HBuilder,、,HBuilderHTML、js、css”[3]。33.1CanvasHTML5Canvas,HTMLCanvas,2D,2D,canvas。:<canvasid=”mycanvas”width=“400”height=”300”>canvas!</canvas>400px×300px,,。width()height(),300px,150px。API,“canvas!”。canvascontext(),CanvasAPIcontext,,getContext。varcanvas=document.getElementById(“mycanvas”);if(canvas.getContext){varcontext=canvas.getContext('2d');}canvas(px),getContext2d,canvas2D(),2D。2D,(0,0)。x,y[4]。1:idmycanvas,javascriptidCanvas。canvas,DOMgetContext("2d")。3.2canvasCSS()Javascript,、、、、,photoshop,canvas,,,。CanvasAPI,、:·clearRect(doublex,doubley,doublew,doubleh)·strokeRect(doublex,doubley,doublew,doubleh)·fillRect(doublex,doubley,doublew,doubleh)[5]Hbuilder<body></body>:<canvasid="mycanvas"width=200height="150"style="border:1px#000solid;"></canvas><scriptlanguage="javascript">varcanvas=document.getElementById('mycanvas');if(canvas.getContext){varcontext=canvas.getContext('2d');//HTML5canvas;:,,W3CHTML1028HTML5(mendation)web,CanvasAPI,javascript,。HTML5CanvasHBuilder,。:HTML5;Canvas;Javascript;API;HBuilder12D[4]·194·context.fillStyle='blue';context.fillRect(30,50,50,50);//:(x,y),,context.clearRect(40,60,30,30);//clearRectcontext.strokeRect(100,50,50,50);//strokeRectfillRect,context.stroke();}</script>z1.html,Hbuilder“web”,2。2Hbuilde(Canvas),3,Chrome(:43.0.2357.124),4。3Hbuilde4Chrome“”,,:beginPath():,;closePath():;stroke():;fill():()。beginPath。,(、),。beginPath,,。,、、。closePath,,,。,。strokefill,,canvas。Stroke,fill。fill,,closePath。,rect,:rect(x,y,width,height),xy,widthheight。5://context.beginPath();//context.rect(100,50,50,50);//(100,50)50context.closePath();//context.stroke();、、、、,canvasAPI,,1:1CanvasAPI-moveTo()o()clip()urveTo()bezierCurveTo()arc()arcTo()isPointInPath(),,/()/,,,JfreeChart,FlashFusionChartsFreeOpenFlashChart。HTML5Canvas,Canvas,Canvas,、、,sin,5。5Hbuildesin4,canvasWeb。,canvasWeb。,HTML5Canvas,,,。HTML5Canvas,,,,。:[1]W3CHTML5.,,[EB/OL].hives/677/,2014-11-19.[2],.HTML5Web[J].,2011,21(8).:55.[3]HBuilde:WebIDE.[EB/OL].l/ews/201402/news8918.html,2014-2-12.[4]HTML5Canvas[EB/OL].engine/archives/22230.shtml.2013-8-4.[5]DavidGeary.HTML5Canvas[M]...2013-5:48:(1972—),,,,,,、web。·195·
1
播放器加载中，请稍候...
系统无法检测到您的Adobe Flash Player版本
建议您在线安装最新版本的Flash Player 在线安装
相关文章
精彩导读
热门资讯
关注我们
