{"id":395,"date":"2022-05-06T11:40:22","date_gmt":"2022-05-06T03:40:22","guid":{"rendered":"http:\/\/blog.yuekegu.com\/?p=395"},"modified":"2022-05-06T11:40:22","modified_gmt":"2022-05-06T03:40:22","slug":"%e8%af%a6%e8%a7%a3javascriptcanvas%e7%bb%98%e5%88%b6%e7%8e%af%e5%bd%a2%e8%bf%9b%e5%ba%a6%e6%9d%a1","status":"publish","type":"post","link":"https:\/\/book.yuekegu.com\/index.php\/2022\/05\/06\/%e8%af%a6%e8%a7%a3javascriptcanvas%e7%bb%98%e5%88%b6%e7%8e%af%e5%bd%a2%e8%bf%9b%e5%ba%a6%e6%9d%a1\/","title":{"rendered":"\u8be6\u89e3JavaScript+Canvas\u7ed8\u5236\u73af\u5f62\u8fdb\u5ea6\u6761"},"content":{"rendered":"\n<h5 class=\"wp-block-heading\">\u76ee\u5f55<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.jb51.net\/article\/237228.htm#_label0\">\u6548\u679c\u56fe<\/a><\/li><li><a href=\"https:\/\/www.jb51.net\/article\/237228.htm#_label1\">\u601d\u8003<\/a><\/li><li><a href=\"https:\/\/www.jb51.net\/article\/237228.htm#_label2\">\u5b9e\u73b0\u601d\u8def<\/a><\/li><li><a href=\"https:\/\/www.jb51.net\/article\/237228.htm#_label3\">\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"heading-0\">\u6548\u679c\u56fe<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img.jbzj.com\/file_images\/article\/202202\/2022211153858491.png?2022111153921\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"heading-1\">\u601d\u8003<\/h2>\n\n\n\n<p>\u79fb\u52a8\u7aef\u7684\u573a\u666f\u91cc\u7ecf\u5e38\u4f1a\u51fa\u73b0\u73af\u5f62\u8fdb\u5ea6\u6761\u7684\u529f\u80fd\uff0c\u5728\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\u524d\uff0c\u6211\u9884\u60f3\u7684\u89e3\u51b3\u65b9\u6848\u5927\u81f4\u6709\uff1a echarts\u3001antv\u3001canvas\u3001svg<\/p>\n\n\n\n<p>\u524d\u9762\u4e24\u79cd\u7b2c\u4e09\u65b9\u63d0\u4f9b\u7684\u89e3\u51b3\u65b9\u6848\u5f53\u7136\u662f\u7b80\u5355\uff0c\u62ff\u5230\u6848\u4f8b\u4fee\u6574\u4e00\u4e0b\u5373\u53ef\uff0c\u4f46\u662f\u9700\u8981\u4e0b\u8f7d\u4f9d\u8d56\uff0c\u800c\u4e14\u4ee3\u7801\u91cf\u4e0d\u5c0f\u3002\u6709\u6ca1\u6709\u4e0d\u9700\u8981\u4f9d\u8d56\u7b2c\u4e09\u65b9\u5305\uff0c\u91c7\u7528\u539f\u751f\u7684\u5199\u6cd5\uff0c\u72ec\u7acb\u5c01\u88c5\u6210\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u964d\u4f4e\u8026\u5408\uff0c\u800c\u4e14\u6027\u80fd\u4f18\u8d8a\uff1f<\/p>\n\n\n\n<p>\u5f53\u7136\uff0c\u90a3\u5c31\u4e3b\u8981\u4ecb\u7ecdcanvas\u7684\u4f7f\u7528<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"heading-2\">\u5b9e\u73b0\u601d\u8def<\/h2>\n\n\n\n<p>\u53ef\u4ee5\u5c55\u793a\u6574\u4e2a\u5706\u3001\u534a\u5706\u4ee5\u53ca\u4efb\u610f\u89d2\u5ea6\u5f27\u5f62\uff08\u5de6\u53f3\u5bf9\u79f0\uff09\u7684\u8fdb\u5ea6\u6761\u3002\u6574\u4f53\u601d\u8def\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>1.\u5148\u786e\u5b9a\u5c55\u793a\u7684\u5f62\u72b6\uff0c\u662f\u6574\u4e2a\u5706\u3001\u534a\u5706\u8fd8\u662f\u4e00\u822c\u7684\u5f27\u5f62<\/p>\n\n\n\n<p>2.\u628a\u786e\u5b9a\u597d\u5f62\u72b6\u7684\u5706\u5f27\u5747\u5206100\u7b49\u4efd\uff0c\u8ba1\u7b97\u51fa\u6bcf\u4e00\u4efd\u6240\u5360\u7684\u5f27\u5ea6<\/p>\n\n\n\n<p>3.\u7070\u8272\u5706\u5f27\u5360100\u4efd\uff0c\u7ea2\u8272\u5706\u5f27\u6700\u7ec8\u5360\u7684\u4efd\u6570\u7531\u53c2\u6570\u786e\u5b9a<\/p>\n\n\n\n<p>4.\u8bbe\u7f6esetInterval\u5b9a\u65f6\u5668\uff0c\u91cd\u590d\u6267\u884c\u753b\u56fe\u64cd\u4f5c<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u6e05\u7a7a\u753b\u5e03<\/li><li>\u5148\u753b\u7070\u8272\u7684\u5706\u5f27\uff0c\u5360100\u4efd<\/li><li>\u518d\u753b\u7ea2\u8272\u7684\u5706\u5f27\uff1a\u7ea2\u8272\u5706\u5f27\u7684\u4efd\u6570\u4ece0\u5f00\u59cb\uff0c\u6bcf\u6b21\u52a01<\/li><li>\u753b\u7ea2\u8272\u5706\u5f27\u672b\u7aef\u7684\u7ea2\u8272\u5706\uff1a\u96be\u70b9\u5728\u4e8e\u6839\u636e\u89d2\u5ea6\u786e\u5b9a\u7ea2\u8272\u5706\u7684\u5706\u5fc3\uff0c\u8fd9\u91cc\u9762\u6d89\u53ca\u5230\u4e09\u89d2\u51fd\u6570\uff0c\u5728\u8349\u7a3f\u7eb8\u4e0a\u753b\u4e2a\u56fe\u5c31\u5927\u81f4\u660e\u767d\u4e86<\/li><li>\u5f53\u7ea2\u8272\u5706\u5f27\u7684\u4efd\u6570\u8fbe\u5230\u6307\u5b9a\u503c\uff08\u4f20\u7684\u53c2\u6570\uff09\u7684\u65f6\u5019\uff0c\u6e05\u9664\u5b9a\u65f6\u5668<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"heading-3\">\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no\">\n  &lt;title>Canvas&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;canvas id=\"canvas\" width=\"300\" height=\"300\">&lt;\/canvas>\n\n  &lt;script>\n    draw(66);\n    \/**\n     * [\u987a\u65f6\u9488\u65b9\u5411\u753b\u56fe\uff0c\u8d77\u59cb\u70b9\u5728\u5de6\u4fa7]\n     * @param  {[number]} percent [\u6240\u5360\u7684\u8fdb\u5ea6\u767e\u5206\u6bd4\uff0c\u6bd4\u598266\n     * @param  {[number]} sR      [\u5706\u5f27\u8d77\u59cb\u89d2\u5ea6\uff0c\u53ef\u4e0d\u4f20\uff0c\u9ed8\u8ba4\u662f\u03c0\/2\uff0cMath.PI\/2 &lt;= sR &lt; 3\/2 * Math.PI]\n     *\/\n    function draw(percent, sR) {\n      if (percent &lt; 0 || percent > 100) {\n        return;\n      }\n      if (sR &lt; Math.PI\/2 || sR >= 3\/2 * Math.PI) {\n        return;\n      }\n\n      var canvas = document.querySelector('#canvas'),\n          cxt = canvas.getContext('2d'),\n          cWidth = canvas.width,\n          cHeight = canvas.height,\n          baseColor = '#e1e1e1',\n          coverColor = '#fe4d43',\n          PI = Math.PI,\n          sR = sR || 1\/2 * PI; \/\/ \u9ed8\u8ba4\u5706\u5f27\u7684\u8d77\u59cb\u70b9\u5f27\u5ea6\u4e3a\u03c0\/2\n\n      var finalRadian = sR + ((PI + (PI - sR) * 2) * percent \/ 100); \/\/ \u7ea2\u5708\u7684\u7ec8\u70b9\u5f27\u5ea6\n      var step = (PI + (PI - sR) * 2)\/100; \/\/ \u4e00\u4e2a1\n      var text = 0; \/\/ \u663e\u793a\u7684\u6570\u5b57\n      var timer = setInterval(function() {\n        cxt.clearRect(0, 0, cWidth, cHeight);\n        var endRadian =  sR + text * step;\n        \/\/ \u753b\u7070\u8272\u5706\u5f27\n        drawCanvas(cWidth\/2, cHeight\/2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);\n        \/\/ \u753b\u7ea2\u8272\u5706\u5f27\n        drawCanvas(cWidth\/2, cHeight\/2, 80, sR, endRadian, coverColor, 2);\n\n        \/\/ \u753b\u7ea2\u8272\u5706\u5934\n        \/\/ \u7ea2\u8272\u5706\u5934\u5176\u5b9e\u5c31\u662f\u4e00\u4e2a\u5706\uff0c\u5173\u952e\u7684\u662f\u627e\u5230\u5176\u5706\u5fc3\uff0c\u6d89\u53ca\u5230\u4e09\u89d2\u51fd\u6570\u77e5\u8bc6\uff0c\u81ea\u5df1\u753b\u4e2a\u56fe\u4e00\u770b\u5c31\u660e\u4e86\n        var angle = 2*PI - endRadian; \/\/ \u8f6c\u6362\u6210\u9006\u65f6\u9488\u65b9\u5411\u7684\u5f27\u5ea6\uff08\u4e09\u89d2\u51fd\u6570\u4e2d\u7684\uff09\n        xPos = Math.cos(angle) * 80 + cWidth\/2; \/\/ \u7ea2\u8272\u5706 \u5706\u5fc3\u7684x\u5750\u6807\n        yPos = -Math.sin(angle) * 80 + cHeight\/2; \/\/ \u7ea2\u8272\u5706 \u5706\u5fc3\u7684y\u5750\u6807\n        drawCanvas(xPos, yPos, 2, 0, 2*PI, coverColor, 2);\n\n        \/\/ \u6570\u5b57\n        cxt.fillStyle = coverColor;\n        cxt.font = '40px PT Sans';\n        var textWidth = cxt.measureText(text+'\n        cxt.fillText(text+'\n        text++;\n\n        if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {\n          clearInterval(timer);\n        }\n      }, 30);\n\n      function drawCanvas(x,y,r,sRadian,eRadian,color,lineWidth) {\n        cxt.beginPath();\n        cxt.lineCap = \"round\";\n        cxt.strokeStyle = color;\n        cxt.lineWidth = lineWidth;\n        cxt.arc(x, y, r, sRadian, eRadian, false);\n        cxt.stroke();\n      }\n    }\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>\u5173\u4e8e\u52a8\u753b\u90e8\u5206\uff0c\u53ef\u4ee5\u4f7f\u7528<code>requestAnimationFrame<\/code>\u505a\u4f18\u5316\uff0c\u51fd\u6570\u6539\u5199\u5982\u4e0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function draw(percent, sR) {\n  if (percent &lt; 0 || percent > 100) {\n    return;\n  }\n  if (sR &lt; Math.PI\/2 || sR >= 3\/2 * Math.PI) {\n    return;\n  }\n\n  var canvas = document.querySelector('#canvas'),\n      cxt = canvas.getContext('2d'),\n      cWidth = canvas.width,\n      cHeight = canvas.height,\n      baseColor = '#e1e1e1',\n      coverColor = '#fe4d43',\n      PI = Math.PI,\n      sR = sR || 1\/2 * PI; \/\/ \u9ed8\u8ba4\u5706\u5f27\u7684\u8d77\u59cb\u70b9\u5f27\u5ea6\u4e3a\u03c0\/2\n\n  var finalRadian = sR + ((PI + (PI - sR) * 2) * percent \/ 100); \/\/ \u7ea2\u5708\u7684\u7ec8\u70b9\u5f27\u5ea6\n  var step = (PI + (PI - sR) * 2)\/100; \/\/ \u4e00\u4e2a1\n  var text = 0; \/\/ \u663e\u793a\u7684\u6570\u5b57\n\n  window.requestAnimationFrame(paint);\n  function paint() {\n    cxt.clearRect(0, 0, cWidth, cHeight);\n    var endRadian =  sR + text * step;\n    \/\/ \u753b\u7070\u8272\u5706\u5f27\n    drawCanvas(cWidth\/2, cHeight\/2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);\n    \/\/ \u753b\u7ea2\u8272\u5706\u5f27\n    drawCanvas(cWidth\/2, cHeight\/2, 80, sR, endRadian, coverColor, 2);\n\n    \/\/ \u753b\u7ea2\u8272\u5706\u5934\n    \/\/ \u7ea2\u8272\u5706\u5934\u5176\u5b9e\u5c31\u662f\u4e00\u4e2a\u5706\uff0c\u5173\u952e\u7684\u662f\u627e\u5230\u5176\u5706\u5fc3\uff0c\u6d89\u53ca\u5230\u4e09\u89d2\u51fd\u6570\u77e5\u8bc6\uff0c\u81ea\u5df1\u753b\u4e2a\u56fe\u4e00\u770b\u5c31\u660e\u4e86\n    var angle = 2*PI - endRadian; \/\/ \u8f6c\u6362\u6210\u9006\u65f6\u9488\u65b9\u5411\u7684\u5f27\u5ea6\uff08\u4e09\u89d2\u51fd\u6570\u4e2d\u7684\uff09\n    xPos = Math.cos(angle) * 80 + cWidth\/2; \/\/ \u7ea2\u8272\u5706 \u5706\u5fc3\u7684x\u5750\u6807\n    yPos = -Math.sin(angle) * 80 + cHeight\/2; \/\/ \u7ea2\u8272\u5706 \u5706\u5fc3\u7684y\u5750\u6807\n    drawCanvas(xPos, yPos, 2, 0, 2*PI, coverColor, 2);\n\n    \/\/ \u6570\u5b57\n    cxt.fillStyle = coverColor;\n    cxt.font = '40px PT Sans';\n    var textWidth = cxt.measureText(text+'\n    cxt.fillText(text+'\n    text++;\n\n    if (endRadian.toFixed(2) &lt; finalRadian.toFixed(2)) {\n      window.requestAnimationFrame(paint);\n    }\n  }\n\n  function drawCanvas(x,y,r,sRadian,eRadian,color,lineWidth) {\n    cxt.beginPath();\n    cxt.lineCap = \"round\";\n    cxt.strokeStyle = color;\n    cxt.lineWidth = lineWidth;\n    cxt.arc(x, y, r, sRadian, eRadian, false);\n    cxt.stroke();\n  }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u76ee\u5f55 \u6548\u679c\u56fe \u601d\u8003 \u5b9e\u73b0\u601d\u8def \u5177\u4f53\u4ee3\u7801\u5b9e\u73b0 \u6548\u679c\u56fe \u601d\u8003 \u79fb\u52a8\u7aef\u7684\u573a\u666f\u91cc\u7ecf\u5e38\u4f1a\u51fa\u73b0\u73af\u5f62\u8fdb\u5ea6\u6761\u7684\u529f\u80fd\uff0c\u5728\u5b9e\u73b0\u8fd9\u4e2a\u529f\u80fd\u524d\uff0c\u6211\u9884\u60f3\u7684\u89e3\u51b3\u65b9\u6848\u5927\u81f4\u6709\uff1a echarts\u3001antv\u3001canvas\u3001svg \u524d\u9762\u4e24\u79cd\u7b2c\u4e09\u65b9\u63d0\u4f9b\u7684\u89e3\u51b3\u65b9\u6848\u5f53\u7136\u662f\u7b80\u5355\uff0c\u62ff\u5230\u6848\u4f8b\u4fee\u6574\u4e00\u4e0b\u5373\u53ef\uff0c\u4f46\u662f\u9700\u8981\u4e0b\u8f7d\u4f9d\u8d56\uff0c\u800c\u4e14\u4ee3\u7801\u91cf\u4e0d\u5c0f\u3002\u6709\u6ca1\u6709\u4e0d\u9700\u8981\u4f9d\u8d56\u7b2c\u4e09\u65b9\u5305\uff0c\u91c7\u7528\u539f\u751f\u7684\u5199\u6cd5\uff0c\u72ec\u7acb\u5c01\u88c5\u6210\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u964d\u4f4e\u8026\u5408\uff0c\u800c\u4e14\u6027\u80fd\u4f18\u8d8a\uff1f \u5f53\u7136\uff0c\u90a3\u5c31\u4e3b\u8981\u4ecb\u7ecdcanvas\u7684\u4f7f\u7528 \u5b9e\u73b0\u601d\u8def \u53ef\u4ee5\u5c55\u793a\u6574\u4e2a\u5706\u3001\u534a\u5706\u4ee5\u53ca\u4efb\u610f\u89d2\u5ea6\u5f27\u5f62\uff08\u5de6\u53f3\u5bf9\u79f0\uff09\u7684\u8fdb\u5ea6\u6761\u3002\u6574\u4f53\u601d\u8def\u5982\u4e0b\uff1a 1.\u5148\u786e\u5b9a\u5c55\u793a\u7684\u5f62\u72b6\uff0c\u662f\u6574\u4e2a\u5706\u3001\u534a\u5706\u8fd8\u662f\u4e00\u822c\u7684\u5f27\u5f62 2.\u628a\u786e\u5b9a\u597d\u5f62\u72b6\u7684\u5706\u5f27\u5747\u5206100\u7b49\u4efd\uff0c\u8ba1\u7b97\u51fa\u6bcf\u4e00\u4efd\u6240\u5360\u7684\u5f27\u5ea6 3.\u7070\u8272\u5706\u5f27\u5360100\u4efd\uff0c\u7ea2\u8272\u5706\u5f27\u6700\u7ec8\u5360\u7684\u4efd\u6570\u7531\u53c2\u6570\u786e\u5b9a 4.\u8bbe\u7f6esetInterval\u5b9a\u65f6\u5668\uff0c\u91cd\u590d\u6267\u884c\u753b\u56fe\u64cd\u4f5c \u6e05\u7a7a\u753b\u5e03 \u5148\u753b\u7070\u8272\u7684\u5706\u5f27\uff0c\u5360100\u4efd \u518d\u753b\u7ea2\u8272\u7684\u5706\u5f27\uff1a\u7ea2\u8272\u5706\u5f27\u7684\u4efd\u6570\u4ece0\u5f00\u59cb\uff0c\u6bcf\u6b21\u52a01 \u753b\u7ea2\u8272\u5706\u5f27\u672b\u7aef\u7684\u7ea2\u8272\u5706\uff1a\u96be\u70b9\u5728\u4e8e\u6839\u636e\u89d2\u5ea6\u786e\u5b9a\u7ea2\u8272\u5706\u7684\u5706\u5fc3\uff0c\u8fd9\u91cc\u9762\u6d89\u53ca\u5230\u4e09\u89d2\u51fd\u6570\uff0c\u5728\u8349\u7a3f\u7eb8\u4e0a\u753b\u4e2a\u56fe\u5c31\u5927\u81f4\u660e\u767d\u4e86 \u5f53\u7ea2\u8272\u5706\u5f27\u7684\u4efd\u6570\u8fbe\u5230\u6307\u5b9a\u503c\uff08\u4f20\u7684\u53c2\u6570\uff09\u7684\u65f6\u5019\uff0c\u6e05\u9664\u5b9a\u65f6\u5668 \u5177\u4f53\u4ee3\u7801\u5b9e\u73b0 \u5173\u4e8e\u52a8\u753b\u90e8\u5206\uff0c\u53ef\u4ee5\u4f7f\u7528requestAnimationFrame\u505a\u4f18\u5316\uff0c\u51fd\u6570\u6539\u5199\u5982\u4e0b\uff1a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-395","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts\/395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/comments?post=395"}],"version-history":[{"count":0,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"wp:attachment":[{"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/book.yuekegu.com\/index.php\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}