canvas编写的动态画图（The dynamic drawing of canvas）.docVIP

下载本文档

10
0
约3.12千字
约 8页
2017-07-21 发布于河南
举报
版权申诉

canvas编写的动态画图（The dynamic drawing of canvas）.doc

1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
7、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

canvas编写的动态画图（The dynamic drawing of canvas）

canvas编写的动态画图（The dynamic drawing of canvas） ! DOCTYPE HTML html head title title head body style = MARGIN: 0px table tr td Id = canvas mycanvas width = 900px height = 600px style = border: 1px Solid # c3c3c3; _ = OnMouseMove CNVs getcoordinates (Event) onmouseout = _ clearcoordinates (CNVs) Setpoint1 (= OnMouseDown Event); (= setpoint2 OnMouseUp Event); Your browser does not support the Canvas element. canvas / td td style = width: 260px; border: 1px Solid Grey valign = Top fieldset style = width: 250px I / I 形状 INPUT TYPE = radio id = shapeline name = Shape value = 0 checked = checked / 直線 INPUT TYPE = radio id = shapecircle name = Shape value = 1 / 圓 INPUT TYPE = radio id = shaperectangle name = Shape value = 2 / 矩形 fieldset Style = width: fieldset 360 I / I 顏色 INPUT TYPE = shapecolor id = color name = Points value = # ff0000 / fieldset / td tr / table BR / BR / div id = xycoordinates / div script type = text / JavaScript Point1x var; Point1y var; Point1flg var = False; Var result; Function _ getcoordinates CNVs (e) { {if (point1flg) / / 获取当前位置 X = e.clientx; And e.clienty =; / / 显示当前位置 .innerhtml document.getElementById (xycoordinates) = Coordinates (X: + , + + + ); Var c = document. Getelementbyid (mycanvas); C.getcontext Cxt = VAR (2D); Cxt.strokestyle = document. Getelementbyid (shapecolor). Value; Cxt.clearrect (0, 0, 900, 600); / / 画线 Cxt.beginpath (); Cxt.moveto (point1x, point1y); Cxt.lineto (X, y); Cxt.stroke (); Cxt.closepath (); } } Clearcoordinates CNVs _ function () { .innerhtml document.getElementById (xycoordinates) = ; } (e) {setpoint1 function Point1x = e.clientx; point1y = e.clienty; point1flg = true; } function setpoint2 (e) { / / 画线 var c = document.getelementbyid (mycanvas); var cxt = c.getcontext (2d). if (document.getelementbyid (shapeline).checked) { / / 直线 drawshape (0, point1x, point1y, e.clientx, e.clienty, document.getelementbyid (shapecolor).value); } else { / / 圆 if (