如果你想使用 HTML5 canvas 来绘制形状、文本和曲线，并且还想附加传统的 DOM 事件，如 onClick 或拖放功能，可以使用 Crossbar 框架 Raphael 来进行拖放操作放下或触摸事件。
此技术针对旧版本的 IE 使用 SVG 和 XML。使用 HTML 进行拖拽如下所示。
<!DOCTYPE html> <html lang = "en"> <head> <Meta charset = "utf-8"> <title>Raphaël · Drag-n-drop</title> <link rel = "stylesheet" href = "demo.css" type = "text/css" media = "screen"> <Meta name = "apple-mobile-web-app-capable" content = "yes"> <link rel = "apple-touch-icon-precomposed" href = "/Raphael.png"> <link rel = "stylesheet" href = "demo-print.css" type = "text/css" media = "print"> <script src = "raphael.js"></script> <script> window.onload = function () { var R = Raphael(0, 0, "100%", "100%"), r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}), g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}), b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "none", opacity: .5}), p = R.circle(430, 100, 50).attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5}); var start = function () { this.ox = this.attr("cx"); this.oy = this.attr("cy"); this.animate({r: 70, opacity: .25}, 500, ">"); }, move = function (dx, dy) { this.attr({cx: this.ox + dx, cy: this.oy + dy}); }, up = function () { this.animate({r: 50, opacity: .5}, 500, ">"); }; R.set(r, g, b, p).drag(move, start, up); }; </script> </head> <body> <div id = "holder"></div> <p id = "copy">Demo of <a href = "http://raphaeljs.com/">Raphaël</a>— JavaScript Vector Library</p> </body> </html>
以上就是"HTML5 Canvas和JS库中的选择/拖放功能?"的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
