Canvas画板

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA6QAAAGgCAIAAAAy0z21AAAgAElEQVR4nO3dfYwkZ30n8JqZfcNex8SWsY2DgQQUwkAWARHYufBiR/xx0oGIPD4DWok/LnAyibgAiX2Hdwl3HNEq0eVQYgfLiszaO2svjGEhBwYlF2xvQGAiEcQaiIgSJRFnYzu4bby7szszXffHvHVXV3XX9FR3PfX056MRzE5XV/2eds9T33n6qaeSFAAAIpXUXQAAAIyKsAsAQLSEXQAAoiXsAgAQLWEXAIBoCbsAAERL2AUAIFrCLgAA0RJ2AQCIlrALAEC0hF0AAKIl7AIAEC1hFwCAaA0Vdo/vT5L9x6supZ6jAMCEOnloX7Lv0Mm6y4DRStJ0NVZm3+3FvwF9fjdOHtqXn08LHyhy8tC+3poAgEInD+3rHSYqHjrqM6h0fH/uOXir6Ti3IBizJM1/t/fPupu6t+mTaTt/b7p3kbOvgg3EXwAoknvq7p91N3Vvkwm7Jw/t23foZMcRju9Pkv2H8k7WnfvpOHb3wZzZGackL1juP573pux+n+f+UvWE3fw39/om+dl4taC8v0z9dQgABXpPufsOHS/Mo5kgmjnBZkd2107Ya2f+7v/r2SrvXx077Px5wQgyVClZf4sf39/xBl1/8x3fn3kPbr4rs+/h4j/VMm/w7vHb3Ezb88b3OQgA9LN+hl0fhN344f7jaXry0L7uk2jHGXjgJ6/7j288YfUgx7PjvDl77fj+5KF9+w4dEnapzeZwadfbsveHaZoWDNTuP77xZt3YvOvdu/En48Y3eb9N+w6d7PMpR95vHgCQpt25c/MU3HEy7k6VuaF2bay26zS+GQM2Ji7s29cZFwrCbs93RnapT2dsXPvDr+uPwuxfg+tv0bWB4Mx7OD/s9r7Te34/OrfPfpyS/U2wSgMAdOo+c69/Ltv1mW32w9q1k+v6M1f/2Sfsrh9n0AU2m9G464NeYZf6FC09lnkHb7zTtxp2838TDm1+2JJ0/JKtHkLYBYCKdH9m2vWpa/mwmz9b8Xj/ObtdadsFatQnKXj7Fb33ci9nGxB2u+dBdIZcYRcAqlC0jlHRCTPvcrZBI7uZZUEHztnteNDILvXpGdnNDb+9c917RnYLntM92yc7jaEw7A4i7AJAH/nht+dS9N6R3cLnrD1Yes5uVyIQdqlP3shuv/ddyWkM3dvv31w2rPNyzpP5c3wHjdwa2QWAjLycOuBkWmIaQ/f+9+3fv2817SbrC5GVPaawS33yRnZX38b5GTh/GsO6jSjbtYpJ14SdrtVKNt7kWwm7AMAAJ9cWTiga3s2dxrDx7NXT8uac2+zKusf3d4xcdR1T2CU4eb8F/aJmx5+AHSO7HY9mFu3t/FxkPeeuz2k/vvnTLYddiRgA1uXPAOyXIzfP4z3n4bRn3Hd9Zabe1RgGXaC2niuEXeqTO7Lb877rWrNv/S/CgrDbMxC8//jJ48c3puom+w4dP7mxTsPavdrK/mHYWZCsCwBFck+mmTs9nOwXdos+wC0TdtfiwKCF+gcmcqhC7gVq2d+OrqvMuh7cGKfNvmM3R3Q35ikk2Unu3TdgK/Ur4ZcDAEroSaJp2r1WUveDx/evjz91B9ze5RjWs3EfOaNRBUO4RnYZg951dotuq5KmXStSb2xWPDsn2b9///paDd3Lj+TfENj7HQCqUnTX07T7hlHrmxWchLvOz07WNFHRTSUAAKDxhF0AAKIl7AIAEC1hFwCAaAm7AABES9gFACBawi4AANESdgEAiJawCwBAtIRdAACiJewCABAtYRcAgGgJuwAAREvYBQAgWsIuAADREnYBAIiWsAsAQLSEXQAAoiXsAgAQrTDCbpLU89W8otJ0PqnnCwAGSWqltlHUFoEwWhhkrgyyKGEXgHCFHNrUNlxtEQijhUHmyiCLEnYBCFfIoU1tw9UWgTBaGGSuDLIoYReAcNWYnBodKEOuLQJhtDDIXBlkUcIuAOGqMTk1OlCGXFsEwmhhkLkyyKKEXQDCVWNyKhMox1PJEIcWdkcqjBYGmSuDLErYBSBcgQfK8VQyxKGF3ZEKo4VB5sogixJ2AQhX4IFyPJUMceiQa4tAGC0MMlcGWZSwC0C4Qg5tagvt0GMTRguDzJVBFiXsAhCukEOb2kI79NiE0cIgc2WQRQm7AIQr5NCmttAOPTZhtDDIXBlkUcIuAOEKObSpLbRDj00YLQwyVwZZlLALQLhCDm1qC+3QYxNGC4PMlUEWJewCEK6QQ5vaQjv02ITRwiBzZZBFCbsAhCvk0Ka20A49NmG0MMhcGWRRwi4A4Qo5tKkttEOPTRgtDDJXBlmUsAtAuEIObWoL7dBjE0YLg8yVQRYl7AIQrpBDm9pCO/TYhNHCIHNlkEUJuwCEK+TQprbQDj02YbQwyFwZZFHCLgDhCjm0qS20Q49NGC0MMlcGWZSwC0C4Qg5tagvt0GMTRguDzJVBFiXsAhCukEOb2kI79NiE0cIgc2WQRQm7AIQr5NCmttAOPTZhtDDIXBlkUcIuAOEKObSpLbRDj00YLQwyVwZZlLALQLhCDm1qC+3QYxNGC4PMlUEWJewCEK6QQ5vaQjv02ITRwiBzZZBFCbsAhCvk0Ka20A49NmG0MMhcGWRRwi4A4Qo5tKkttEOPTRgtDDJXBlmUsAtAuEIObWoL7dBjE0YLg8yVQRYl7AIQrpBDm9pCO/TYhNHCIHNlkEUJuwCEK+TQprbQDj02YbQwyFwZZFHCLgDhCjm0qS20Q49NGC0MMlcGWZSwC0C4Qg5tagvt0GMTRguDzJVBFiXsAhCukEOb2kI79NiE0cIgc2WQRQm7AIQr5NCmttAOPTZhtDDIXBlkUcIuAOEKObSpLbRDj00YLQwyVwZZlLALQLhCDm1qC+3QYxNGC4PMlUEWJewCEK6QQ5vaQjv02ITRwiBzZZBFCbsAhCvk0Ka20A49NmG0MMhcGWRRwi4A4Qo5tKkttEOPTfwtBADGI+TQprbQDj028bcQABiPpFZqG0VtEYi/hQAATCxhFwCAaAm7AABES9gFACBawi4AANESdgEAiJawCwBAtIRdAACiJewCABAtYRcAgGgJuwAAREvYBQAgWsIuAADREnYBAIiWsAsAQLSEXQAAoiXsAgAQrWShsep+6QAACF2ysLDQaiBhFwCAgZKFhYWnGkjYBQBgIGEXAIBoJQsLCz9pIGEXAICBhF0AAKIl7AIAEK1kYWHh3wY7cn1y/ZGOf3T8q++zXvGRr5V5oPQeNwi7AAAMlCwsLDw52N3XJ9ff/eSTTz755N985BVJh1d85G/6Pavg4bUH7r4+ybd2rD6EXQAABhocdjsS6Ss+8pHrN5Po33zkFdlUWpheO6Lx5jbXX399Xqy9O/enwi4AAFtVbmR3I9dmxnWzI7GZodzuf3aE2M0H1ne4mqPLDBcLuwAAlJQsLCw8MciJg7NJcv1dq9/NHjzxxBNPPHHX9WvfPHHX9auPdf0w75+9D9x1fTJ78MQTJw7OXn/X2n42j9CXsAsAwEDJwsLC4wOcODibJEmSzB48sf5txtxdq1veNddvEsP6Vo8/ftfc7NzcbJIkc3edODibzB48sXacubm5tX8MIOwCADBQibC7mkGTubtOHJw7eGIj0nYE3I0Ue9fc7METa//bk5c7tlpNzo8//vjjJ06cuOvg7GaCLhd1hV0AAEpIFhYWftzXQwdm5w4fnkvmDj90YDWUzh1Y/Wbu8OG5JElmDzy0uenqPw7PJXOHO/fQsdHhudkDB+bW/n14Lunc8sc/PjzXsWkfwi4AAAMNDruHDxx4aC29PvTQQ4dXR3UP/3g1587NzXZk1c6Mu55aD88lvfH18Nzs6k5nZ3unRczOznYHYGEXAIChJAsLC48N9qm5ZO5TDx6YTZK5Tz322Oo3Bw7Mzn3qwQOzswceXN2o8/vH1rZKOn/SsbuOJ80deHDtAJ0/H0DYBQBgoK2E3UyCXfvZp+ZWE/Bjn5pbT7YPrk1z+FRR5F0PtRvPXd/Zgwdm8+OxsAsAwJYlCwsLjw5253XJdXc++sAts8nsLQ88cMva3IPr7nz00UcfffSBW2Znb3ngzuuS6+5cfWj2lgcyz+94yp3XrT/1zutmb3lg47H1Jz1wy+zafvsRdgEAGKhk2A2OsAsAwEDJwsLC/2sgYRcAgIGEXQAAopUsLCz8qIGEXQAABhJ2AQCIVrLQWHW/dAAAhC6puwAAABiVpAUAAJESdgEAiJawCwBAtIRdAACiJewCABAtYRcAgGgJuwAAREvYBQAgWsIuAADREnYBAIiWsAsAQLSEXQAAoiXsAgAQLWEXAIBoCbsAAERL2AUAIFrCLgAA0RJ2AQCIlrALAEC0hF0AAKIl7AIAEC1hFwCAaAm7AABES9gFACBawi4AANESdgEAiJawCwBAtIRdAACiJewCABAtYRcgaIvf/FA6P5XOJ+n8TDqf5H1NbX5zZLruegHCIuwChOjMwx/uSLFJOp+kR3KTbp8v2RdA2AUIyeLDN2UzbmVfsi8wiYRdgPqd+dbBbY/jyr4AOYRdgNqk8zMjG8eVfQFaLWEXYPyCCbiyLxA/YRdgTNrHLixeUSHvKzuTYerMwx/u3W16ZHr06Vn2BZpK2AUYh64FwrYYNBe/+aEtHEj2Begg7AKMVtno2TuO+62DFRx9hNl3aj2Lf3D7dQKMiLALMCrp/PQQCXLx4ZtGWFKF2bcjnY+uYIBt0kMBVK997/lbTLpTtdRZTfY9shZ8a2kCQH/6JoAqPfPII6Xj41Q6P1N3vV2GzL6GeIGA6ZgAKlM6KTbj6q7hsm/dVQN00SsBVKD8aG7dlQ5vK9m3GWkemATCLsC2lJ6b2+CY22vxmx8cFHyjai/QXMIuwJDan76o3E0iZtrHLqy72FHJnbkb7KRkYAIJuwDD8IH+hoKk2xX3664RmFzCLsDWTML03K0a+JrUXSAwuXRAAGVN5vTckgbkXQvxAjXR9QAMls7PlBvQnXrmkUfqLrY2hX8MWIgXqI9+B6CfcpegJen8dPve8+suNhSmNADh0OkA5CsdcyfiKrQtGfjS1V0gMEH0OAD5TM/dpsLIa/4uMEa6G4Au7Xv3irkVMn8XqJe+BmBTufUWZtqfvqjuSpskN+nKu8B46GgA1pRbb8H9EYaRm3TNZwDGQC8D0GqVSrpi7rYUz2cwIQQYIWEXYOC1aGJuNUyABsZP2AUmWnrPTlehjZO/KIAxE3aByTVo6oKkOxJFL3jddQFx0rkAE2pQ0nWfiFEpWn+37rqAOOlcgEnUf5Ju+969dRcYueK/NHbWXRoQG2EXmDj5y2AZXxyvorxbd11AbHQrwGTJW/rKJN16CLvAGOhWgAnicrSgFNyvzn8IoErCLjAp+iXde0wVrYfBXWDU9CnAROiTdOsubaIVzNw1uAtURi8PxC+dnyq6Iq3u0jC4C4yWDgWI3ObYYU/erbu0IaXzM+n81Okv/HHTG7KqYHDXOsdANZrdRQL0V3AJVLMD4sZn/Rttefbvj6Xzycp9z6+7tCGZyQCMToO7e4CBIku6BSumrX0tPnxz3QUOqaBFBneBCjS1xwcYKLKk22q11pJuXt5tbtJttVrp/M7I/ksB4dCVAHEqXn6h2eOF8SXdVemR3LxrMgOwXcIuEKHs8OeRGMJTcXyPoSdv33tebtPa955Xd2lAs8XQRQJ0ysu4q983OunO5GXBmbrrqlL+sgxH3O8D2BZhF4hNwZhus7u7niDY4ODeR8HQdVSZHhizZvf+AJ1OPXLnWsDtybt1l7YtK5/7+bzr0iLMu0VLxdVdF9BgehBosGPHnr311tN1VxGQgtsTNL6jK2hXnOOdE9VYYAwafw6AiXXs2LNJkiZJ+v73L9ZdSyiiTLqteNuVq2B2crTtBUZN9wGNND2dribdJEmnptIPfUjebbXyl+Vq/Gf9K8d/YULmMGwwcxeokLALjTQ1tRl2V7/qrqhmp35wtGu27vo3px65s+7Stiv7sf6RJJ1PVj7383XXNUIFg7sx53tgdIRdaKT3v39xdUy3M+9OTU1u5M2Z6Hkkkv5tMj/TLxjclXeBLYu/x4SIZQZ3JznvxpoIC67Wij/zFc3cXf4/v1J3aUDDxHAygIn1oQ8t9s5nmMy82z62N75Zre279/YOV6fzycrxX6i7tDGJ9W8YYJz0GtB45u+28lLRqR8crbuoCkxy1Fv+/CtNZgC2b4L6TYhYb9694YZzdRc1VrGGwvTIzky72nfvrbuo8SlaONlkBqC8SM4HwISP70YZdg1qtsxkALZNlwHxyOTd5z2vXXdF4xNlHoqyUVuVN5lhajJfCmA4+guIysQO7kaZC6Ns1BAmdkkKoBIT2nVCrDKDuzt3TkrejTIXRtmo4ZjMAAxNZwGxmczB3SiTUJSNGk7u4G7dRQHNoLOA2EzmbdWiTEJRNmo4BfeYmKm7LqABJrfrhIhN4OBulLkwykYNzbRdYDgT3XVCrHbunLjB3ShzYZSNGpppu8Bw9BQQp0kb3I0yBkXZqKEVrMkwXXddQOgmuuuEiD3vee2JGtyNLxfmzlKtu6iapeuL7HpNgPJ0ExCtzODuzEzMeTe+XGj9gV69N082cxcYaNK7TojYDTecy+Tdiy6K9p5q8eVCYbdXOr87d+ZuOr+77tKAcE161wlxu+mmxUzefe97z9Zd1EjElwsNYebKn7l7ZGfddQHhavz5AOgvs+xurBerxXepvrBbpPcaNa8M0EezTwZAGZmwG2vebbVa6ZHO0b5m5928sOseCq1Wq5XOT+e9OAZ3gXwNPhMA5WXCbpSLM/Qm3UaP70Y2UF0ta5AB5ek9YSK8971nM3n3I1P/vb1nT3bIN/drairdtavuFgyWm3TT+aTVerzu0oYh7PZhjgdQnt4TJsVFF7UzIXZHslQq7G5E3iRJp4KOFL1Jdz0mPll3aVsm7PYh7ALl6T1hUpz52Md2TK1kEuylyWNbyLvrqbfupvRTcKWasBsV67IB5ekdYCKk64sy/M/kv2Wy6weTP9xq2E2TZPHGG+tuU6Hi8d0maXr9IyXsAuXpHSByac/aY1NJdj5D4XN37ep9eiPGd1utVqv1RKPzUKOLH7XcBRnqLgoIlN4BopXu2FE0OjvEYmS9qffse94zhlZsR6PzUKOLH7V0Pue+wXUXBQRK7wARal9ySZ9JCGf+4A9aQy1GtnjjjU0b3G1wZGxu5ePh9QFK0jtAVM6+4x19ptuefcc7Nrb87d/O3kn4wIEzA/efGd9t79kzytZU4qlW66l0Pmm1/m31+7rrKUuY68/rA5Skd4B4FM6vTZL2JZf0bv+852Un755/frv/Ic6+5z2ZPY+mKRVL55NW6yd1V9HP6b/7o3R+qn3veel88uzfHzt98lZhrj+vD1CS3gFi0Cfmpjt29Hli77Tem25a3NqxmjCZIWSnv30od20BYa4/rw9Qkt4Bmi3dtavP9Nwye3jJS7KL7w4+qLBbhfTojqJcu/jwzcJcf14foCS9A2zZs8eOnb711rqraK1cfvk2Y+6GrS7OkL3PsLy7Re2FS/qM5i4+fHNLmBvE6wOUpHeArXn22LHaE97Zd7+731Vo7373EPvM7GZ6ekDebeLM3UD0naswdfrbh4o2q7fs0Hh9gJL0DrAFm0m3poR36vbb+0zPXbn88qH3/PrXL2X2d/nlK3227yrDyG457YVLijJuOj91+u/+qHNjYa4/rw9Qkt4BtuD0rbdmI+bOneM59KlPfrLfVWi7dm3/EL0Xq/XfXt4tb/n+1xWO5h7Nv4JQmOvP6wOUpHeArelNnKM+4un+MbfSlNl7nD4bm8lQxupqYrlf7YWc9eA2CHP9eX2AkvQOsGXpzp3jyXmnb7ttbDF3Q89BCvNuprZRFNNcTz/9aP8FxQbuQZjrz+sDlKR3gE3ll1kY9WSGgTH39G23VXvETpmj7dhRLu+aybCuf8ztP6DbsRNhrh+vD1CS3gHWbFx8VnL7bACdmamqkuWXv7yumLvq8suzK+++/vVLuVuayZCR3rO7/2ILTz/9aKn99MblI/6W6CLsAiXpHaDV6g5tZZ/SM5lh6eqrq60kG3M/+cnt77+k6elSk3fTzHbT02OrMDQrn3thv9Hce8/b0t6Gm/kwUbw+QEl6B2i1hgq7rVarfdllFQ5tLl11VVHMPTXGmLuht5DczQzuLn7zA31i7vL9rxtin7mjwpVX3mjCLlCS3gFarWHDbitvIHbIAnLv+js1der224fbYSUy5bzkJTkr7074tN1zf/32opi7+M0PDLfPdH4mb4eVzZOJg7ALlKR3gFarO7OuXHnl0M9Nk6R92WVbPnretWjtiy/e6n4qd9NNi2UuVssE9PHXWZeimLvyuRdub7c517dVVXM0vERASXoHaLUyc0+3GNeWrr66d0S25HNP33Zb7tSFMVyFVtL557cz1V1wQTuzzQTOZDjzrQ/nJ917dm9/5ybsluElAkrSO0Cr1Tu2usWlFdKZmey47N69A5/Vvvji3KkLwzZihDI1vvSlXfMZJm3B3ZX7rhjpnNr0SO/IbojvinoJu0BJegdotVqtlSuv3Obw5OL73pfZw9l3vavP9suveU1O0q3irr+j0DvP4p3vPNu5Qfh5vSrp0R058xbuu6LKQ4hxJXiVgJL0DrAmO7i79cRW/k7CuVMXlq66anstGK3ekn/4w6c3Hp2EmQwr9z0/d4LBmW99uNoDiXFleJWAkvQOsCkng251PkPPHjIbLF1zTW7Sra4RI9Rb+MZDca/JsPjNDxZdizaKw4lxZXiVgJL0DrBpbert9oZ4+8zBbe/Z0xtzl1/+8qrbMUITmHdz5y2k88m5v377qI4oxpXgVQJK0jtAVu7Ia/kh3rPvelfmuYvve1+rYH2xla2vU1avH/7w6aK828Sx6v6K5i2k88niN35ndMcV48rwKgEl6R0gq3dpha2mt/bevfmJufvr1J//+ehaMTrvfOfZnsHrtBXXmgx9boq2ct/zR310Ma4MrxJQkt4B8uUOxJb/dD7/6bF8yv/Sl64MHtxtbBuL5i2kR3eMqQAxrgSvElCS3gEK5Q/xls5wz37607lJt71nz0jLHo8LLsjebGJ6Om36TIZ+8xaGvffvEMS4MrxKQEl6BxggZ4y2XN7NvWfE0jXXjLrgsdmxo2di81S7oSO7i9/4nRrnLWSIcWV4lYCS9A4w2BB5d/l1ryuawzCemscmO76brDSupek9u+qdt5CtR4wrwasElKR3gFJy8m7x3c5O/8mf9L80bZyVj9r0dLZ9G3m37tIGax+7oHjewgfrqkqMK8OrBJSkd4Cycq85y9+ydzZrXBeoZRTl3brr6mdloXB67vjnLWSIcWV4lYCS9A6wBbl596df/3rXNnmBePlVr8r88NlPf7qmRoxEbt6tu6h8y198bVHMrWveQoYYV4ZXCShJ7wBbljMzYf2WE72DuBvPaj/nOZM2vlt3RVlnH9qfHp0qiLnTp753Z90FrhHjyvAqASXpHWDLipbgPXX4cOaHp//kT3KeGNHNFzJ68+5ll7XrLqrVarVOfe/O9Oh0QcydOvvQ/roL7CLGAVRIHwrDKLrLWufX8utel//cuK9XS7L3m/joR8/UWM/p796W3rO7aN7C8hdfW2NtRYRdgArpQ2FIP/361/sk3fbFFxc9MXdg+JnvfW+cxY9OmiTXJn8VwnyGs1/7zfToTOFVaAs1X4XWh7ALUCF9KGxLbtI98/GPD3jWrl29z1p6y1vGU/NIrbal91UZZw1LX3lzOl8wN3c+aR+7YJzFDEHYBaiQPhS2K39k92d/tv+z2pdemvOsSy8dT82js9GWTON27BhH3l3+wssKL0Gbn0rvKVwaOSjCLkCF9KGwLfkXq60tvjXd/7lLb3lLzrOK71XRCBsN+U/JHZmWvfjFI1yMrH3fZYULis0n7WMXPP3YD0Z39GoJuwAV0ofC8M58/OMDLlMbtLjYM9/73hDPCllnQy68sJ1p2Re+8Gy1h3v6sR/0uQtaOp+077us2iOOgbALUCF9KAxped++3kHZ4ZJrNOszpHv2ZFox0sV325+5uHBu7tGp5S+8rMJjjZOwC1AhfSgM4/QnPpEJcSsveMHqQ8NNacjk44aO7+YuIdwT/ivIuyuffUHxaO7U0lfevP1D1EjYBaiQPhSGkcmyizfe2PVowUTeU7ff3m+fvc9q2vzdovtlZJq1e/fweXf5C7OFMffozNmv/WYV7aiZsAtQIX0obFn2nsB5o7Yrz3/+cLN4M9v3Wa83QEUtvfbapczL8KpXLW9150tf/rXClRbu2X36u7dV2pQ6CbsAFdKHwtYs3nhjyfm16Y4dhReu7dhR+Kye8d3lV796NE2pXp9Yf9552YvVyu/23FevK7rZb/ve83/6T39ZdTtqJuwCVEgfCluz8rKXdebR05/4RP/tC9cmKx7i7d34zMc+VnU7RqKr7D17Mo/2vhIDd7j4jQ+kR3cUjuZ+549H046aCbsAFdKHQjlPPdV66qlzb39715jrvn1lnnrq9tsLh3gLLlzr3bLSxoxE1+yOgihf/mK10yf/LL13T0HM3bH49d8aWTvqJ+wCVEgfCqUMMfs2u4feVbg2Lly7444yR6yoKaNSstpMs847r53Z4Kf/cqJ9796CS9Cmz3317SNuR/2EXYAK6UOhlN7o2b7ggmH2s5VZDc3KuyX/EnjVq5Yzzbr22qWNR9sLlxStm7t0/9VjaUf9hF2ACulDoZTe3Hnu7UMOMZa/cO3Mxz7WlLzb3ru36y+BvXv7bLx7d87k3ZXPXlm0ptjy55t6e4jhCLsAFdKHQimVh86SQ7zLr371NqdPjEfRCrtFOjf/9sdfVRRzV+67YgzFh0bYBaiQPhRKGcUI66k77iga4m1fcsnGZu2LLw5/cHeICpMk/av/em274H6/7c9c1HrysVGXTSOk8wNuQAjQR4hnTQjT2Xe9axSJsy/wGKMAAApWSURBVPDCtY4R3HTXruyju3dXVcD2Lb3pTV21Dbo3cqvVOvfgDen8TH7MPXb+s//4pTGUTVMY2wa2Qw8CZbWf85w0SdKdO0ex86JZDX02WH7lK0dRyRC6ahs0y2Lx4d8rWjr37OFdd90yYN1iJlDeuyXEyTxAmIRdKOuZ73535UUvWvzd3x3R/guHeNcHSs/dcEPmoad/9KMRFVPe0jXXlJxSfOqRO9r35C+du3z3zP/e//6Ni9WgU97qHCP5mxOIkrALYek/pSHAxRkyQ85L117bu80z//qN9rELipbOve+//Ebv4gywwRV7wHboMiA4hQs1TE+3Asu7S9deO3BYt/2ZwqVzl+9//eo2mTa98Y1LvfthYpnDAGyHsAshal9ySdFCDaf/9E/7XMo2Ztlh3Wuu6Xx05XMvKlxT7PO/2LnlRz96JtOm17xmebxNIUS5b566iwIaRq8B4eqzFm8IizNky+jI3Mt/sa946dzn5+7tssvaJjOQIewC26fXgKD1u91aZnGGV7xirIX1BO6lN72p1WotfeWatGjp3GPPffrH/9xnn/IunQreSDN11wU0jLALDVA4xFvT4gy99bRarbMPvjM9WrB07r3nPfsPx8vsOdOmCy9sj7YlBMywLlAJHQc0w6k77yyTd8dQSTozkz3ub0yl9+zMn7dwz64z3/6D8ju/9dbTmX3feuvp0bWFYBXcc8SlacCWCbvQJIVr8Y4r72YP97okvTN/bm56dObs135ziENceKHJDBjWBSqj74DmGTyrYab6eY3tCy/sOsSlSXpHQcydnzr3V/++8gKYKMIuUBV9BzTSM9/61uDIW92SZNkR5duKRnOnlr/4K1UdlIlVcGnadN11AY0k7EKzlYm8z/zt31Z2iP9lgI2RM6wLVEj3ATHIuWgsL/Wmu3ZtbbedMfd/iB2MQ3o092JHl6YBQ3LSAmiYuNeazZ3DcO6v/2PddQFNJewCNEzcw5zmMADV0oMANEw6nyx/+bV1VzESLk0DKifsAjRMxHNYDesCldOJAIRuQiJg0bLNddcFNFuE3SVAZAo+3I8qBWZbd2Tj+z11lwY0m7ALELrlL7+2O/+tfbXv3lt3adXIbV16xBkKqICuBKAZYp3JsDlu3ZN36y4NiIGuBKAB2nfvLZjS2uw1dwtmaEi6QGX0JgDNUJQL665reOn8jKQLjJoOBaAxCvJuUwd3JV1gDPQpAI1RMBTayGUZipJuc7M7ECZhF6BJ4giIxUm3kcEdCJmwC9Akfea5NiXyFi+pK+kC1RN2gRgkSfrWt56ru4oxae4KBun87vzKjzSgeKChdC5ADJIkTZK07irGpGNwtyf1Bpwa+2T0YGsGIqB/ARrsbW87txpzV7+mpycl764qng+QtI9eWHd1m9L56T4xV9IFRkoXAzTb9HTamXff9rZJmczQ6neZV0BTYNMjO4vmLUi6wBjoZYDG20i6U1PpFVes1F3O+PS9WG0z8i596aoQywt4xgUQEx0N0HhvfWvXZIY3vGGp7orGqitTHumfeq8eY1X9Zuim80l6ZOfYigEmmbALDfP0j/+5fey5hWnmK9cMsc/23r1dUwGSJN2zp/LKR2rXrs3ad+2arJm7q/ol3e6ft9aS6AjXKRucdOenR3d0gE7CLjTJyn3PL0oPy3+xbzt7TnfuzOTd9nOfW1HV4/CGNyx1ln/VVZM1uLtq4HVgG38U9V4fVkn8Xfrir5aIuUHMJAYmh7ALzbDy+V8sSg8rn3tRVUfJ5N2VF7+4qj2PwRVXrFxwQXuj/LrLqcdm1uw3n6F//N1y5F26/9dLZNzVr92jaDVAH8IuhG75/tenR/OTRPszl1R7rHRqKpN3l64ZZl5EXTYKv/LKCbpMLWN10bGiOQz1fRnQBeoh7EK4zv3f/5Aezf9gun3sgmf+9RujOGh28m6SnLn55lEcaBSuuqprMkPd5dRp6UtXZUdb60y9ki5QG2EXQrT4tf+cHs1ftql9z55Tj9wx0qP35t1nvv/9kR6xQj/5SevmmxeTJL355sW6awnC0peuXk+9ne+okrMOtvG1ma1HeCUcwEDCLoTl9N/9YXrPrvz0cHTH4sO/N54yevPueI5bCUm3j3R+ZnWcdQwDunW3FaDVEnYhHM/+45fax84vyA3T5x68Ycz1NDrvUl41I77ZORJTS/f/et0tA2i1hF0IwpOPtT9zUcFo7tTSl99YS1HPfP/78u7k2PaI78xaxv3ir9bdFIAuTl1Qs5X7rigKEMt/8cp6aztz883yLgCN5rwFtVn+/MuKYu7KZ6+su7o1S9dck827U66sB6AxhF2owdL9VxcunbtQ8dK527fy4hcb3AWgoZy0YKzOffXthUvn3rv3p/9you4C87Wf+9zs+O6uXXUXBQCDCbswJotf/630nh358xbu3XP65J/VXeAA6Z498i4AjSPswsid/s4fp/fsLlhsYcfiNz5Qd4FbIO8C0CzCLozQT//pL9v3Fiyde3T63Fevq7vALUt37ZJ3AWgQYRdGZfnzv5S/RP/RqaUv/1rd1Q1P3gWgQYRdqN7ZE/vTozOrw7fZpXO/MFt3dRWQdwFoCmEXqvTsDz/bPvYzmfumri+d+4K6q6uSvAtAIwi7UKW8ZcWm2p+5uO66RkLeBSB8wi5U5al0Pml/+qKupXOP/cyzP/xs3YWNkLwLQOCEXahGz1VoM2dP7K+7qHGQdwEImbALVVq6/9+l88ny53+p7kLGqjfv1l0RAKxxTgIq0Jt323v21F0UAAi7QEXkXQACJOwCVZJ3AQiKsAtUqb1nj7wLQDiEXaBi8i4A4RB2gerJuwAEQtgFRkLeBSAEwi4wKvIuALUTdoER6s27dVcEwGRx4gFGqzfvrrzwhXUXBcCkEHaBkevNu0tvfnPdRQEwEYRdYBye+c53Mnn3zMGDdRcFQPyEXWBM0p07M3n36R/9qO6iAIicsAuMTzo97Xo1AMbJmQYYq0zYTaen664IgJgJu8BYPf2jH2Xz7s6ddRcFQLSEXWDczhw8mMm7z3znO3UXBUCchF2gBktvfnP25mqXXlp3UQBESNgF6rHywhfKuwCMmrAL1EneBWCkhF2gTu1LL7UYGQCj47wC1Kwr705Nyb4AVMiJBKhf7/iusAtAJZxIgCAs//IvC7sAVM6JBAhF5mbC7YsuOn3rrXUXBUCzCbtAKM78/u+nSZLOzGzk3aU3vrHuogBoNmEXCEuaJCtXXnnm4MGVn/u5p//hH+ouB4BmE3YBAIiWsAsAQLSEXQAAoiXsAgAQLWEXAIBoCbsAAERL2AUAIFrCLgAA0RJ2AQCIlrALAEC0hF0AAKIl7AIAEC1hFwCAaAm7AABES9gFACBawi4AANESdgEAiJawCwBAtIRdAACiJewCABAtYRcAgGgJuwAAREvYBQAgWsIuAADREnYBAIiWsAsAQLSEXQAAoiXsAgAQLWEXAIBoCbsAAERL2AUAIFrCLgAA0RJ2AQCIlrALAEC0hF0AAKIl7AIAEC1hFwCAaAm7AABE6/8DhZ/QHx0xAWYAAAAASUVORK5CYII=" alt="" />

1、页面元素

<div class="row">
    <div>
        <p>笔触颜色</p>
        <ul class="strokeStyle">
            <li style="background-color: red"></li>
            <li style="background-color: blue"></li>
            <li style="background-color: orange"></li>
        </ul>
    </div>
    <div>
        <p>笔触粗细</p>
        <ul class="lineWidth">
            <li>
                <div style="height: 2px"></div>
            </li>
            <li>
                <div style="height: 4px"></div>
            </li>
            <li>
                <div style="height: 6px"></div>
            </li>
        </ul>
    </div>
    <div>
        <button type="button" id="clearrect">橡皮擦</button>
    </div>
</div>
<canvas id="_canvas">

</canvas>

2、脚本实现

<!--设置笔触-->
<script>
    $(function () {
        //设置笔触颜色
        $(".strokeStyle li").click(function () {
            var style = $(this).css("background-color");

            var context = canvas_.getContext("2d");
            context.strokeStyle = style;
        });

        //设置笔触颜色
        $(".lineWidth li").click(function () {
            var Width = $(this).children("div").css("height");

            var context = canvas_.getContext("2d");
            context.lineWidth = Width.replace("px", "");
        });
    })
</script>
<script type="text/javascript">
    var canvas_ = document.getElementById("_canvas");

    //全屏
    canvas_.setAttribute("width", screen.width);
    canvas_.setAttribute("height", screen.height);

    var context = canvas_.getContext("2d");
    context.strokeStyle = "red";//设置笔触颜色
    context.lineWidth = 4;//设置线条粗细

    var array_paint = [];
    var current_y = 0;
    var current_x = 0;
    //判断鼠标是否按下
    var m_down = false;

    //画线
    function paint() {
        context.beginPath();//清空子路径
        context.moveTo(array_paint[0][0], array_paint[0][1]);//将画笔移到x0,y0处
        if (array_paint.length == 1)
            context.lineTo(array_paint[0][0] + 1, array_paint[0][1] + 1);//从画笔位置到x1,y1画一条线
        else {
            var i = 1;
            for (i in array_paint) {
                context.lineTo(array_paint[i][0], array_paint[i][1]);
                context.moveTo(array_paint[i][0], array_paint[i][1]);
            }

        }
        context.closePath();//闭合路径
        context.stroke();//画线框
    }

    var IsPaint = true;
    $("#clearrect").click(function () {
        IsPaint = !IsPaint;
    })
    //橡皮擦
    function clearRect() {
        context.moveTo(array_paint[0][0], array_paint[0][1]);//将画笔移到x0,y0处
        if (array_paint.length == 1)
            context.clearRect(array_paint[0][0] + 1, array_paint[0][1] + 1, 20, 20);//从画笔位置到x1,y1画一条线
        else {
            var i = 1;
            for (i in array_paint) {
                context.clearRect(array_paint[i][0], array_paint[i][1], 20, 20);
                context.moveTo(array_paint[i][0], array_paint[i][1]);
            }
        }
    }

    //按下鼠标
    canvas_.onmousedown = function (event) {
        m_down = true;
        current_x = event.offsetX;
        current_y = event.offsetY;
        array_paint.push([current_x, current_y]);
        if (IsPaint) {
            paint();
        } else {
            clearRect();
        }
    }

    //鼠标松开,清空数据
    canvas_.onmouseup = function (event) {
        m_down = false;
        array_paint = [];
    }

    //鼠标按下后拖动
    canvas_.onmousemove = function (event) {
        if (m_down) {
            current_x = event.offsetX;
            current_y = event.offsetY;
            array_paint.push([current_x, current_y]);
            if (IsPaint) {
                paint();
            } else {
                clearRect();
            }
        }
    }
</script>

3、一些小样式

    <style type="text/css">
        #_canvas {
            background-color: rgb(240, 240, 240);
        }

        .row {
            width: 100%;
            height: 100px;;
        }

        .row > div {
            width: 50%;
            float: left;
        }

        .row > div > ul {
            display: flex;
            list-style: none;
        }

        .row > div > ul > li {
            width: 40px;
            height: 40px;
            margin: 0 5px;
        }

        .lineWidth > li {
            margin: 0 5px;
            border: 1px solid #000000;
        }

        .lineWidth > li > div {
            width: 40px;
            height: 2px;
            background-color: rgb(0, 0, 0);
        }
    </style>