html\uff1a<\/p>\n
<canvas><\/canvas>\r\n<div>\r\n <button onclick=\"cancel()\">\u53d6\u6d88<\/button>\r\n <button onclick=\"save()\">\u4fdd\u5b58<\/button>\r\n<\/div><\/pre>\n<\/p>\n
<\/p>\n
js\uff1a<\/p>\n
<script>\r\n \/\/ \u914d\u7f6e\u5185\u5bb9\r\n const config = {\r\n width: 400, \/\/ \u5bbd\u5ea6\r\n height: 200, \/\/ \u9ad8\u5ea6\r\n lineWidth: 5, \/\/ \u7ebf\u5bbd\r\n strokeStyle: 'red', \/\/ \u7ebf\u6761\u989c\u8272\r\n lineCap: 'round', \/\/ \u8bbe\u7f6e\u7ebf\u6761\u4e24\u7aef\u5706\u89d2\r\n lineJoin: 'round', \/\/ \u7ebf\u6761\u4ea4\u6c47\u5904\u5706\u89d2\r\n }\r\n\r\n \/\/ \u83b7\u53d6canvas \u5b9e\u4f8b\r\n const canvas = document.querySelector('canvas')\r\n \/\/ \u8bbe\u7f6e\u5bbd\u9ad8\r\n canvas.width = config.width\r\n canvas.height = config.height\r\n \/\/ \u8bbe\u7f6e\u4e00\u4e2a\u8fb9\u6846\r\n canvas.style.border = '1px solid #000'\r\n \/\/ \u521b\u5efa\u4e0a\u4e0b\u6587\r\n const ctx = canvas.getContext('2d')\r\n\r\n \/\/ \u8bbe\u7f6e\u586b\u5145\u80cc\u666f\u8272\r\n ctx.fillStyle = 'transparent'\/\/\u900f\u660e\u80cc\u666f\u8272\r\n \/\/ \u7ed8\u5236\u586b\u5145\u77e9\u5f62\r\n ctx.fillRect(\r\n 0, \/\/ x \u8f74\u8d77\u59cb\u7ed8\u5236\u4f4d\u7f6e\r\n 0, \/\/ y \u8f74\u8d77\u59cb\u7ed8\u5236\u4f4d\u7f6e\r\n config.width, \/\/ \u5bbd\u5ea6\r\n config.height \/\/ \u9ad8\u5ea6\r\n );\r\n\r\n \/\/ \u4fdd\u5b58\u4e0a\u6b21\u7ed8\u5236\u7684 \u5750\u6807\u53ca\u504f\u79fb\u91cf\r\n const client = {\r\n offsetX: 0, \/\/ \u504f\u79fb\u91cf\r\n offsetY: 0,\r\n endX: 0, \/\/ \u5750\u6807\r\n endY: 0\r\n }\r\n\r\n \/\/ \u5224\u65ad\u662f\u5426\u4e3a\u79fb\u52a8\u7aef\r\n const mobileStatus = (\/Mobile|Android|iPhone\/i.test(navigator.userAgent))\r\n\r\n \/\/ \u521d\u59cb\u5316\r\n const init = event => {\r\n \/\/ \u83b7\u53d6\u504f\u79fb\u91cf\u53ca\u5750\u6807\r\n const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event\r\n\r\n \/\/ \u4fee\u6539\u4e0a\u6b21\u7684\u504f\u79fb\u91cf\u53ca\u5750\u6807\r\n client.offsetX = offsetX\r\n client.offsetY = offsetY\r\n client.endX = pageX\r\n client.endY = pageY\r\n\r\n \/\/ \u6e05\u9664\u4ee5\u4e0a\u4e00\u6b21 beginPath \u4e4b\u540e\u7684\u6240\u6709\u8def\u5f84\uff0c\u8fdb\u884c\u7ed8\u5236\r\n ctx.beginPath()\r\n \/\/ \u6839\u636e\u914d\u7f6e\u6587\u4ef6\u8bbe\u7f6e\u76f8\u5e94\u914d\u7f6e\r\n ctx.lineWidth = config.lineWidth\r\n ctx.strokeStyle = config.strokeStyle\r\n ctx.lineCap = config.lineCap\r\n ctx.lineJoin = config.lineJoin\r\n \/\/ \u8bbe\u7f6e\u753b\u7ebf\u8d77\u59cb\u70b9\u4f4d\r\n ctx.moveTo(client.endX, client.endY)\r\n \/\/ \u76d1\u542c \u9f20\u6807\u79fb\u52a8\u6216\u624b\u52bf\u79fb\u52a8\r\n window.addEventListener(mobileStatus ? \"touchmove\" : \"mousemove\", draw)\r\n }\r\n \/\/ \u7ed8\u5236\r\n const draw = event => {\r\n \/\/ \u83b7\u53d6\u5f53\u524d\u5750\u6807\u70b9\u4f4d\r\n const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event\r\n \/\/ \u4fee\u6539\u6700\u540e\u4e00\u6b21\u7ed8\u5236\u7684\u5750\u6807\u70b9\r\n client.endX = pageX\r\n client.endY = pageY\r\n\r\n \/\/ \u6839\u636e\u5750\u6807\u70b9\u4f4d\u79fb\u52a8\u6dfb\u52a0\u7ebf\u6761\r\n ctx.lineTo(pageX , pageY )\r\n\r\n \/\/ \u7ed8\u5236\r\n ctx.stroke()\r\n }\r\n \/\/ \u7ed3\u675f\u7ed8\u5236\r\n const cloaseDraw = () => {\r\n \/\/ \u7ed3\u675f\u7ed8\u5236\r\n ctx.closePath()\r\n \/\/ \u79fb\u9664\u9f20\u6807\u79fb\u52a8\u6216\u624b\u52bf\u79fb\u52a8\u76d1\u542c\u5668\r\n window.removeEventListener(\"mousemove\", draw)\r\n }\r\n \/\/ \u521b\u5efa\u9f20\u6807\/\u624b\u52bf\u6309\u4e0b\u76d1\u542c\u5668\r\n window.addEventListener(mobileStatus ? \"touchstart\" : \"mousedown\", init)\r\n \/\/ \u521b\u5efa\u9f20\u6807\/\u624b\u52bf \u5f39\u8d77\/\u79bb\u5f00 \u76d1\u542c\u5668\r\n window.addEventListener(mobileStatus ? \"touchend\" :\"mouseup\", cloaseDraw)\r\n\r\n \/\/ \u53d6\u6d88-\u6e05\u7a7a\u753b\u5e03\r\n const cancel = () => {\r\n \/\/ \u6e05\u7a7a\u5f53\u524d\u753b\u5e03\u4e0a\u7684\u6240\u6709\u7ed8\u5236\u5185\u5bb9\r\n ctx.clearRect(0, 0, config.width, config.height)\r\n }\r\n \/\/ \u4fdd\u5b58-\u5c06\u753b\u5e03\u5185\u5bb9\u4fdd\u5b58\u4e3a\u56fe\u7247\r\n const save = () => {\r\n \/\/ \u5c06canvas\u4e0a\u7684\u5185\u5bb9\u8f6c\u6210blob\u6d41\r\n canvas.toBlob(blob => {\r\n \/\/ \u83b7\u53d6\u5f53\u524d\u65f6\u95f4\u5e76\u8f6c\u6210\u5b57\u7b26\u4e32\uff0c\u7528\u6765\u5f53\u505a\u6587\u4ef6\u540d\r\n const date = Date.now().toString()\r\n \/\/ \u521b\u5efa\u4e00\u4e2a a \u6807\u7b7e\r\n const a = document.createElement('a')\r\n \/\/ \u8bbe\u7f6e a \u6807\u7b7e\u7684\u4e0b\u8f7d\u6587\u4ef6\u540d\r\n a.download = `${date}.png`\r\n \/\/ \u8bbe\u7f6e a \u6807\u7b7e\u7684\u8df3\u8f6c\u8def\u5f84\u4e3a \u6587\u4ef6\u6d41\u5730\u5740\r\n a.href = URL.createObjectURL(blob)\r\n \/\/ \u624b\u52a8\u89e6\u53d1 a \u6807\u7b7e\u7684\u70b9\u51fb\u4e8b\u4ef6\r\n a.click()\r\n \/\/ \u79fb\u9664 a \u6807\u7b7e\r\n a.remove()\r\n })\r\n }\r\n<\/script><\/pre>\n<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
html\uff1a <canvas><\/canvas> <div> <but […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9048","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9048"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9048\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}