{"id":33331,"date":"2024-11-25T13:04:36","date_gmt":"2024-11-25T05:04:36","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33331\/"},"modified":"2024-11-25T13:04:36","modified_gmt":"2024-11-25T05:04:36","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%94%a8canvas%e7%bb%98%e5%88%b6%e6%b5%b7%e6%8a%a5%e7%9a%84%e5%81%9a%e6%b3%95","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33331\/","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5"},"content":{"rendered":"<p>2020\u5e74\u7b2c\u4e00\u7bc7\u6587\u7ae0\uff0c\u5e74\u521d\u5fd9\u7740\u590d\u4e60\u5237\u9898\u4e00\u76f4\u6ca1\u7a7a\u53bb\u5199\u4e1c\u897f\uff0c\u4e66\u770b\u7684\u8d8a\u591a\u611f\u89c9\u8d8a\u6280\u4e0d\u5982\u4eba\uff0c\u59cb\u7ec8\u5f98\u5f8a\u5728\u5c0f\u83dc\u9e21\u7684\u884c\u5217\u4e2d\uff0c\u6700\u8fd1\u9879\u76ee\u91cc\u6b63\u597d\u6709\u4e00\u4e2acanvas\u7684\u4e1a\u52a1\uff0c\u7a81\u7136\u53c8\u71c3\u8d77\u4e86\u6211\u4e00\u4e2aui\u524d\u7aef\u7684\u706b\u79cd\uff0c\u8bb0\u4e0b\u4e86\u8e29\u5751\u548c\u601d\u8003\u3002<\/p>\n<h2>\u8e29\u5751<\/h2>\n<h3>\u95ee\u98981:\u4e3a\u4ec0\u4e48\u5728canvas\u4e0a\u753b\u56fe\u7247\u6a21\u7cca\uff1f<\/h3>\n<p>\u5728canvas\u4e0a\u7ed8\u5236\u56fe\u7247\/\u6587\u5b57\u7684\u65f6\u5019\uff0c\u6211\u4eec\u8bbe\u5b9acanvas\uff1a375*667\u7684\u5bbd\u9ad8\uff0c\u4f1a\u53d1\u73b0\u7ed8\u5236\u51fa\u6765\u7684\u56fe\u7247\u5f88\u6a21\u7cca\uff0c\u611f\u89c9\u50cf\u662f\u4e00\u5f20\u5206\u8fa8\u7387\u5f88\u5dee\u7684\u56fe\u7247\uff0c\u6587\u5b57\u770b\u8d77\u6765\u4e5f\u4f1a\u6709\u53e0\u5f71\u3002<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b18b104b923aa9857d906b6cf7849c7-0.png\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe\" \/> <\/p>\n<blockquote><p>\n  \u6ce8\u610f\uff1a\u7269\u7406\u50cf\u7d20\u662f\u6307\u624b\u673a\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u6700\u5c0f\u5355\u5143\uff0c\u800c\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\uff08\u903b\u8f91\u50cf\u7d20\uff09\u8ba1\u7b97\u673a\u8bbe\u5907\u4e2d\u7684\u4e00\u4e2a\u70b9\uff0ccss \u4e2d\u8bbe\u7f6e\u7684\u50cf\u7d20\u6307\u7684\u5c31\u662f\u8be5\u50cf\u7d20\u3002\n<\/p><\/blockquote>\n<p>\u539f\u56e0\uff1a\u5728\u524d\u7aef\u5f00\u53d1\u4e2d\u6211\u4eec\u77e5\u9053\u4e00\u4e2a\u5c5e\u6027\u53ebdevicePixelRatio\uff08\u8bbe\u5907\u50cf\u7d20\u6bd4\uff09\uff0c\u8be5\u5c5e\u6027\u51b3\u5b9a\u4e86\u5728\u6e32\u67d3\u754c\u9762\u65f6\u4f1a\u7528\u51e0\u4e2a\uff08\u901a\u5e38\u662f2\u4e2a\uff09\u7269\u7406\u50cf\u7d20\u6765\u6e32\u67d3\u4e00\u4e2a\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\u3002<\/p>\n<p>\u4e3e\u4e2a\u4f8b\uff0c\u4e00\u5f20100*100\u50cf\u7d20\u5927\u5c0f\u7684\u56fe\u7247\uff0c\u5728retina\u5c4f\u5e55\u4e0b\uff0c\u4f1a\u75282\u4e2a\u50cf\u7d20\u70b9\u53bb\u6e32\u67d3\u56fe\u7247\u7684\u4e00\u4e2a\u50cf\u7d20\u70b9\uff0c\u76f8\u5f53\u4e8e\u56fe\u7247\u653e\u5927\u4e86\u4e00\u500d\uff0c\u56e0\u6b64\u56fe\u7247\u4f1a\u53d8\u5f97\u6a21\u7cca\uff0c\u8fd9\u4e5f\u662f1px\u5728retina \u5c4f\u4e0a\u53d8\u7c97\u7684\u539f\u56e0\u3002<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b18b104b923aa9857d906b6cf7849c7-1.png\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe1\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe1\" \/> <\/p>\n<p>\u89e3\u51b3\uff1a \u5c06canvas-width\u548ccanvas-height\u90fd\u653e\u59272\u500d\uff0c\u5728\u901a\u8fc7style\u5c06canvas\u7684\u663e\u793awidth,height\u7f29\u5c0f2 \u500d.<\/p>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre>&lt;canvas width=\"320\" height=\"180\" style=\"width:160px;height:90px;\"&gt;&lt;\/canvas&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>\u95ee\u98982:\u5982\u4f55\u5904\u7406px\u548crpx\u7684\u8f6c\u6362\uff1f<\/h3>\n<p>rpx\u662f\u5c0f\u7a0b\u5e8f\u91cc\u7279\u6709\u7684\u5c3a\u5bf8\u5355\u4f4d\uff0c\u53ef\u4ee5\u6839\u636e\u5c4f\u5e55\u7684\u5bbd\u5ea6\u8fdb\u884c\u81ea\u9002\u5e94\uff0c\u800c\u5728iphone6\/iphonex\u4e0a\uff0c1rpx\u7b49\u4e8e\u4e0d\u540c\u7684px\u3002\u6240\u4ee5\u5f88\u53ef\u80fd\u4f1a\u5bfc\u81f4\u5728\u4e0d\u540c\u624b\u673a\u4e0b\uff0c\u4f60\u7684canvas\u5c55\u793a\u4e0d\u4e00\u81f4\u3002<\/p>\n<p>\u5728\u7ed8\u5236\u6d77\u62a5\u7684\u4e4b\u524d\uff0c\u6211\u4eec\u62ff\u5230\u7684\u8bbe\u8ba1\u7a3f\u4e00\u822c\u90fd\u662f\u57fa\u4e8eiphone6\u76842\u500d\u56fe\u3002\u800c\u4e14\u4ece\u4e0a\u4e00\u4e2a\u95ee\u9898\u7684\u89e3\u51b3\uff0c\u6211\u4eec\u77e5\u9053canvas\u7684\u5927\u5c0f\u4e5f\u662f2\u500d\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u91cf\u53d62\u500d\u56fe\u7684\u8bbe\u8ba1\u7a3f\u76f4\u63a5\u7ed8\u5236canvas\uff0c\u800c\u5c3a\u5bf8\u9700\u8981\u6ce8\u610f\u4e00\u4e0brpxtoPx.<\/p>\n<pre>\/**\n   * \n   * @param {*} rpx \n   * @param {*} int  \/\/\u662f\u5426\u53d8\u6210\u6574\u6570\n   factor =&gt; 0.5 \/\/iphone6\n   pixelRatio =&gt; 2 \u50cf\u7d20\u6bd4\n   *\/\ntoPx(rpx, int) {\n    if (int) {\n      return parseInt(rpx * this.factor * this.pixelRatio)\n    }\n    return rpx * this.factor * this.pixelRatio\n  }<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>\u95ee\u98983:\u5173\u4e8ecanvasContext.measureText\u8ba1\u7b97\u7eaf\u6570\u5b57\u7684\u65f6\u5019\u624b\u673a\u4e0a\u4e3a0<\/h3>\n<p>\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u63d0\u4f9bthis.ctx.measureText(text).width\u53bb\u8ba1\u7b97\u6587\u672c\u7684\u957f\u5ea6\uff0c\u4f46\u662f\u5982\u679c\u4f60\u5168\u6570\u5b57 \u7684\u8bdd\uff0c\u4f60\u4f1a\u53d1\u73b0\u8be5API\u6c38\u8fdc\u90fd\u8ba1\u7b97\u62100.\u6240\u4ee5\uff0c\u6700\u540e\u91c7\u7528\u6a21\u62dfmeasureText\u65b9\u6cd5\u53bb\u8ba1\u7b97\u6587\u672c\u957f\u5ea6\u3002<\/p>\n<pre>measureText(text, fontSize = 10) {\n    text = String(text)\n    text = text.split('')\n    let width = 0\n    text.forEach(function(item) {\n      if (\/[a-zA-Z]\/.test(item)) {\n        width += 7\n      } else if (\/[0-9]\/.test(item)) {\n        width += 5.5\n      } else if (\/.\/.test(item)) {\n        width += 2.7\n      } else if (\/-\/.test(item)) {\n        width += 3.25\n      } else if (\/[u4e00-u9fa5]\/.test(item)) { \/\/ \u4e2d\u6587\u5339\u914d\n        width += 10\n      } else if (\/(|)\/.test(item)) {\n        width += 3.73\n      } else if (\/s\/.test(item)) {\n        width += 2.5\n      } else if (\/%\/.test(item)) {\n        width += 8\n      } else {\n        width += 10\n      }\n    })\n    return width * fontSize \/ 10\n  }<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>\u95ee\u98984:\u5982\u4f55\u4fdd\u8bc1\u4e00\u884c\u5b57\u4f53\u7684\u5c45\u4e2d\u5c55\u793a\uff1f\u591a\u884c\u5462\uff1f<\/h3>\n<p>\u5b57\u4f53\u7684\u5982\u679c\u8fc7\u957f\uff0c\u4f1a\u8d85\u51facanvas\u753b\u5e03\uff0c\u9020\u6210\u7ed8\u5236\u96be\u770b\uff0c\u8fd9\u4e2a\u65f6\u5019\u6211\u4eec\u5c31\u5e94\u8be5\u8ba9\u8d85\u51fa\u7684\u90e8\u5206\u53d8\u6210&#8230;\u4f60\u53ef\u4ee5\u8bbe\u7f6e\u4e00\u4e2awidth\u5e76\u4e14\u5faa\u73af\u8ba1\u7b97\u8ba1\u7b97\u51fa\u6587\u672c\u7684\u5bbd\u5ea6\uff0c\u5982\u679c\u8d85\u51fa\u5219\u5229\u7528substring\u622a\u53d6\u540e\u8865\u5145&#8230;\u5373\u53ef\u3002<\/p>\n<pre>let fillText=''\nlet width = 350\nfor (let i = 0; i &lt;= text.length - 1; i++) { \/\/ \u5c06\u6587\u5b57\u8f6c\u4e3a\u6570\u7ec4\uff0c\u4e00\u884c\u6587\u5b57\u4e00\u4e2a\u5143\u7d20\n        fillText = fillText + text[i]\n        \/\/ \u5224\u65ad\u622a\u65ad\u7684\u4f4d\u7f6e\n        if (this.measureText(fillText, this.toPx(fontSize, true)) &gt;= width) {\n          if (line === lineNum) {\n            if (i !== text.length - 1) {\n              fillText = fillText.substring(0, fillText.length - 1) + '...'\n            }\n          }\n          if (line &lt;= lineNum) {\n            textArr.push(fillText)\n          }\n          fillText = ''\n          line++\n        } else {\n          if (line &lt;= lineNum) {\n            if (i === text.length - 1) {\n              textArr.push(fillText)\n            }\n          }\n        }\n      }<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u6587\u5b57\u5267\u4e2d\u5c55\u793a\u8ba1\u7b97\u516c\u5f0f\uff1a<\/p>\n<p>\u5c45\u4e2d\u5728canvas\u4e2d\u53ef\u4ee5\u7528\uff08canvas\u7684\u5bbd\u5ea6-\u6587\u5b57\u5bbd\u5ea6\uff09\/2 + x \uff08x\u4e3a\u5b57\u4f53\u7684x\u8f74\u7684\u63a8\u79fb\uff09<\/p>\n<pre>let w = this.measureText(text, this.toPx(fontSize, true))\nthis.ctx.fillText(text, this.toPx((this.canvas.width - w) \/ 2 + x), this.toPx(y + (lineHeight || fontSize) * index))<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>\u95ee\u98985:\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5982\u4f55\u5904\u7406\u7f51\u7edc\u56fe\uff1f<\/h3>\n<p>\u5173\u4e8e\u5728\u5c0f\u7a0b\u5e8f\u91cc\u4f7f\u7528\u7f51\u7edc\u56fe\u7247\uff0c\u6bd4\u5982cdn\u4e0a\u7684\u56fe\u7247\uff0c\u662f\u9700\u8981down\u5230\u5fae\u4fe1\u672c\u5730\u8fdb\u884c LRU \u7ba1\u7406\uff0c\u8ba9\u540e\u7eed\u7ed8\u5236\u540c\u6837\u56fe\u7247\u65f6\uff0c\u8282\u7701\u4e0b\u8f7d\u65f6\u95f4\u3002\u6240\u4ee5\u9996\u5148\u9700\u8981\u4f60\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u540e\u53f0\u914d\u7f6edownloadFile\u5408\u6cd5\u57df\u540d\uff0c\u5176\u6b21\u4f60\u53ef\u4ee5\u5728canvas\u7ed8\u5236\u4e4b\u524d\uff0c\u6700\u597d\u63d0\u524d\u53bbdown\u56fe\u7247\uff0c\u7b49\u5f85\u56fe\u7247\u4e0b\u8f7d\u597d\u4e86\uff0c\u518d\u5f00\u59cb\u7ed8\u5236\uff0c\u4ee5\u907f\u514d\u4e00\u4e9b\u7ed8\u5236\u5931\u8d25\u7684\u95ee\u9898\u3002<\/p>\n<h3>\u95ee\u98986:\u5728 IDE \u4e2d\u53ef\u8bbe\u7f6e base64 \u7684\u56fe\u7247\u6570\u636e\u8fdb\u884c\u7ed8\u5236\uff0c\u4f46\u771f\u673a\u4e0a\u65e0\u7528\uff1f<\/h3>\n<p>\u5148\u628a base64 \u8f6c\u6210 Uint8ClampedArray \u683c\u5f0f\u3002\u7136\u540e\u518d\u901a\u8fc7 wx.canvasPutImageData(OBJECT, this) \u7ed8\u5236\u5230\u753b\u5e03\u4e0a\uff0c\u7136\u540e\u628a\u753b\u5e03\u5bfc\u51fa\u4e3a\u56fe\u7247\u3002<\/p>\n<h3>\u95ee\u98986:\u5982\u4f55\u753b\u4e00\u4e2a\u5706\u89d2\u56fe\u7247\uff1f<\/h3>\n<h3>\u95ee\u98987:\u5173\u4e8ewx.canvasToTempFilePath<\/h3>\n<p>\u4f7f\u7528 Canvas \u7ed8\u56fe\u6210\u529f\u540e\uff0c\u76f4\u63a5\u8c03\u7528\u8be5\u65b9\u6cd5\u751f\u6210\u56fe\u7247\uff0c\u5728IDE\u4e0a\u6ca1\u6709\u95ee\u9898\uff0c\u4f46\u5728\u771f\u673a\u4e0a\u4f1a\u51fa\u73b0\u751f\u6210\u7684\u56fe\u7247\u4e0d\u5b8c\u6574\u7684\u60c5\u51b5\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2asetTimeout\u6765\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002<\/p>\n<pre>this.ctx.draw(false, () =&gt; {\n        setTimeout(() =&gt; {\n            Taro.canvasToTempFilePath({\n              canvasId: 'canvasid',\n              success: async(res) =&gt; {\n                this.props.onSavePoster(res.tempFilePath)\/\/\u56de\u8c03\u4e8b\u4ef6\n                \/\/ \u6e05\u7a7a\u753b\u5e03\n                this.ctx.clearRect(0, 0, canvas_width, canvas_height)\n              },\n              fail: (err) =&gt; {\n                console.log(err)\n              }\n            }, this.$scope)\n          }, time)\n    })<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h3>\u95ee\u98988:\u5173\u4e8ecanvasContext.font<\/h3>\n<p>fontsize \u4e0d\u80fd\u4f7f\u7528\u5c0f\u6570 \u5982\u679c\u8bbe\u7f6e font \u4e2d\u5b57\u4f53\u5927\u5c0f\u90e8\u5206\u5305\u542b\u5c0f\u6570\uff0c\u5219\u4f1a\u5bfc\u81f4\u6574\u4e2a font \u8bbe\u7f6e\u65e0\u6548\u3002<\/p>\n<h3>\u95ee\u98989:\u5b89\u5353\u4e0b\u5b57\u4f53\u6e32\u67d3\u9519\u4f4d\uff1f<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b18b104b923aa9857d906b6cf7849c7-2.jpg\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe2\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe2\" \/> <\/p>\n<p>\u8fd9\u4e2a\u95ee\u9898\u51fa\u73b0\u5728\u5b89\u5353\u624b\u673a\u4e0a\uff0cios\u8868\u73b0\u6b63\u5e38\u3002\u4e00\u5f00\u59cb\u770b\u5230\u8fd9\u4e2a\u95ee\u9898\uff0c\u6478\u4e0d\u7740\u5934\u8111\uff0c\u4e3a\u4ec0\u4e48\u6709\u7684\u6b63\u5e38\u5c45\u4e2d\u6709\u7684\u5374\u5f80\u524d\u4e86\u5f88\u591a\u3002\u540e\u9762\u53d1\u73b0\u662f\u5b89\u5353\u4e0bthis.ctx.setTextAlign(textAlign) \u9ed8\u8ba4\u662f\u4e3acenter\uff0c\u6240\u4ee5\u5bfc\u81f4\u4e86\u9519\u4e71\uff0c\u6539\u6210left\u540e\u5c31\u6b63\u5e38\u4e86\u3002<\/p>\n<h3>\u95ee\u989810:\u7ed8\u5236\u4e00\u4e2a\u6298\u7ebf\u56fe<\/h3>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b8347fbadc6ed622ca3de719e4e0eaf-3.jpg\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe3\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe3\" \/> <\/p>\n<p>\u5229\u7528canvas\u7ed8\u5236\u4e00\u4e2a\u7b80\u5355\u7684\u6298\u7ebf\u56fe\uff0c\u53ea\u9700\u8981\u5229\u7528lineTo\u548cmoveTo\u4fe9\u4e2aAPI\u5c06\u70b9\u8fde\u63a5\u5373\u53ef\u3002\u5229\u7528createLinearGradient\u7ed8\u5236\u9634\u5f71\u3002<\/p>\n<h2>\u601d\u8003<\/h2>\n<h3>\u601d\u80031:\u7528json\u914d\u7f6e\u8868\u751f\u6210\u6d77\u62a5\u7684\u5c40\u9650<\/h3>\n<p>\u73b0\u5728\u7684\u6d77\u62a5\u751f\u6210\u53ea\u9700\u8981\u6309\u7167\u8bbe\u8ba1\u7a3f\u53bb\u91cf\u53d6\u5c3a\u5bf8\u5c31\u53ef\u4ee5\uff0c\u4f46\u662f\u91cf\u53d6\u7684\u8fc7\u7a0b\u8fd8\u662f\u5f88\u7e41\u7410\u7684\uff0c\u5728\u8bbe\u8ba1\u7a3f\u91cf\u4e0d\u5230\u7684\u5730\u65b9\u8fd8\u9700\u8981\u624b\u52a8\u5fae\u8c03\u4e00\u4e0b\u3002 \u540e\u7eed\u8fd8\u53ef\u4ee5\u505a\u4e00\u4e2aweb\u7aef\u4f7f\u7528\u62d6\u62fd\u7684\u65b9\u5f0f\u53bb\u5b8c\u6210\u8bbe\u8ba1\u7a3f\u7684\u4e8b\u60c5\uff0c\u81ea\u52a8\u751f\u6210json\u5e94\u7528\u5230\u5c0f\u7a0b\u5e8f\u7684\u6d77\u62a5\u4e0a\u3002<\/p>\n<h3>\u601d\u80032:\u540e\u7aef\u751f\u6210\u6d77\u62a5\u7684\u5c40\u9650<\/h3>\n<p>\u6d77\u62a5\u4e00\u5f00\u59cb\u662f\u540e\u7aef\u540c\u5b66\u751f\u6210\u7684\uff0c\u4f18\u70b9\u662f\u4e0d\u9700\u8981\u524d\u7aef\u7ed8\u5236\u65f6\u95f4\uff0c\u4e5f\u4e0d\u9700\u8981\u53bb\u8e29\u5fae\u4fe1API\u7684\u5751\uff0c\u63a5\u53e3\u8fd4\u56de\u62ff\u5230url\u5373\u53ef\u5c55\u793a\uff0c\u4f46\u662f\u5728\u540e\u7aef\u751f\u6210\u51fa\u6765\u7684\u6548\u679c\u4e0d\u4f73\uff0c\u6bd5\u7adf\u8fd9\u79cd\u5de5\u4f5c\u66f4\u52a0\u524d\u7aef\u4e00\u4e9b\u3002<\/p>\n<h3>\u601d\u80033:\u524d\u7aef\u751f\u6210\u6d77\u62a5\u7684\u5c40\u9650<\/h3>\n<p>\u524d\u7aef\u751f\u6210\u6d77\u62a5\u7684\u65f6\u5019\u6211\u53d1\u73b0\u8017\u65f6\u66f4\u957f\uff0c\u5305\u62ec\u56fe\u7247\u7684\u4e0b\u8f7d\u672c\u5730\u800c\u4e14\u8fd8\u9700\u8981\u7ed9\u5b89\u5353\u4e00\u4e2a\u7279\u610f\u5199\u4e00\u4e2asetTimeout\u53bb\u786e\u4fdd\u7ed8\u5236\u6b63\u5e38\u3002\u5404\u79cd\u517c\u5bb9\u6027\u95ee\u9898\u3001\u624b\u673a\u7684dpr\u3001\u5b89\u5353\u548cios\u7b49\u4e0d\u95f4\u65ad\u5f69\u86cb\u8e29\u5230\u4f60\u5934\u79c3\uff5e \u54c8\u54c8\u54c8\u54c8\uff5e<\/p>\n<h2>\u5f69\u86cb<\/h2>\n<h3>\u91c7\u7528\u4e86\u6700\u65b0\u7684canvas-2d\u80cc\u666f\u56fe\u786e\u65e0\u6cd5\u7ed8\u5236\u5168\u90e8\uff1f<\/h3>\n<p>\u5728canvas\u5f00\u53d1\u7684\u8fc7\u7a0b\u4e2d\uff0c\u5c0f\u7a0b\u5e8f\u91cc\u4e00\u76f4\u6709\u4e00\u675f\u5fae\u5149\u63d0\u9192\u6211\u3002<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b8347fbadc6ed622ca3de719e4e0eaf-4.png\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe4\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe4\" \/> <\/p>\n<p>\u6211\u4e5f\u8bd5\u4e86\u8bd5\u6700\u65b0\u7684canvas2d\u7684api\uff0c\u7684\u786e\u540c\u6b65\u4e86web\u7aef\uff0c\u5199\u6cd5\u4e5f\u66f4\u6d41\u7545\uff0c\u5728\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u770b\u662f\u4e00\u5207\u6b63\u5e38\uff0c\u8dd1\u5728\u624b\u673a\u4e0a\u5219\uff0c\u53ea\u663e\u793a\u5bbd\u5ea6\u7684\u4e00\u534a\u5728\u5404\u79cd\u673a\u578b\u4e0b\u6d4b\u8bd5\u4e5f\u662f\u4e00\u6837\u3002<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b8347fbadc6ed622ca3de719e4e0eaf-5.jpg\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe5\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe5\" \/> <\/p>\n<p>\u540e\u9762\u6539\u6210\u539f\u59cb\u7684canvas\u5c31\u53c8\u597d\u4e86\u3002\u3002\u3002\u5177\u4f53\u539f\u56e0\u4e5f\u8fd8\u6ca1\u6709\u5728\u5fae\u4fe1\u793e\u533a\u91cc\u627e\u5230\uff0c\u540e\u7eed\u8fed\u4ee3\u5347\u7ea7\u7684\u65f6\u5019\u518d\u7814\u7a76\u963f\u5427\u554a\u5427\u554a\u5427\u3002<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/051\/9b8347fbadc6ed622ca3de719e4e0eaf-6.jpg\" style=\"max-width:90%\" title=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe6\" alt=\"\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u63d2\u56fe6\" \/> <\/p>\n<p>\u63a8\u8350\u6559\u7a0b\uff1a\u300a\u300b<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u7528canvas\u7ed8\u5236\u6d77\u62a5\u7684\u505a\u6cd5\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>2020\u5e74\u7b2c\u4e00\u7bc7\u6587\u7ae0\uff0c\u5e74\u521d\u5fd9\u7740\u590d\u4e60\u5237\u9898\u4e00\u76f4\u6ca1\u7a7a\u53bb\u5199\u4e1c\u897f\uff0c\u4e66\u770b\u7684\u8d8a\u591a\u611f\u89c9\u8d8a\u6280\u4e0d\u5982\u4eba\uff0c\u59cb\u7ec8\u5f98\u5f8a\u5728\u5c0f\u83dc\u9e21\u7684\u884c\u5217\u4e2d\uff0c\u6700\u8fd1\u9879\u76ee\u91cc\u6b63\u597d\u6709\u4e00\u4e2acanvas\u7684\u4e1a\u52a1\uff0c\u7a81\u7136\u53c8\u71c3\u8d77\u4e86\u6211\u4e00\u4e2aui\u524d\u7aef\u7684\u706b\u79cd\uff0c\u8bb0\u4e0b\u4e86\u8e29\u5751\u548c\u601d\u8003\u3002 \u8e29\u5751 \u95ee\u98981:\u4e3a\u4ec0\u4e48\u5728canvas\u4e0a\u753b\u56fe\u7247\u6a21\u7cca\uff1f \u5728canvas\u4e0a\u7ed8\u5236\u56fe\u7247\/\u6587\u5b57\u7684\u65f6\u5019\uff0c\u6211\u4eec\u8bbe\u5b9acanvas\uff1a375*667\u7684\u5bbd\u9ad8\uff0c\u4f1a\u53d1\u73b0\u7ed8\u5236\u51fa\u6765\u7684\u56fe\u7247\u5f88\u6a21\u7cca\uff0c\u611f\u89c9\u50cf\u662f\u4e00\u5f20\u5206\u8fa8\u7387\u5f88\u5dee\u7684\u56fe\u7247\uff0c\u6587\u5b57\u770b\u8d77\u6765\u4e5f\u4f1a\u6709\u53e0\u5f71\u3002 \u6ce8\u610f\uff1a\u7269\u7406\u50cf\u7d20\u662f\u6307\u624b\u673a\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u6700\u5c0f\u5355\u5143\uff0c\u800c\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\uff08\u903b\u8f91\u50cf\u7d20\uff09\u8ba1\u7b97\u673a\u8bbe\u5907\u4e2d\u7684\u4e00\u4e2a\u70b9\uff0ccss \u4e2d\u8bbe\u7f6e\u7684\u50cf\u7d20\u6307\u7684\u5c31\u662f\u8be5\u50cf\u7d20\u3002 \u539f\u56e0\uff1a\u5728\u524d\u7aef\u5f00\u53d1\u4e2d\u6211\u4eec\u77e5\u9053\u4e00\u4e2a\u5c5e\u6027\u53ebdevicePixelRatio\uff08\u8bbe\u5907\u50cf\u7d20\u6bd4\uff09\uff0c\u8be5\u5c5e\u6027\u51b3\u5b9a\u4e86\u5728\u6e32\u67d3\u754c\u9762\u65f6\u4f1a\u7528\u51e0\u4e2a\uff08\u901a\u5e38\u662f2\u4e2a\uff09\u7269\u7406\u50cf\u7d20\u6765\u6e32\u67d3\u4e00\u4e2a\u8bbe\u5907\u72ec\u7acb\u50cf\u7d20\u3002 \u4e3e\u4e2a\u4f8b\uff0c\u4e00\u5f20100*100\u50cf\u7d20\u5927\u5c0f\u7684\u56fe\u7247\uff0c\u5728retina\u5c4f\u5e55\u4e0b\uff0c\u4f1a\u75282\u4e2a\u50cf\u7d20\u70b9\u53bb\u6e32\u67d3\u56fe\u7247\u7684\u4e00\u4e2a\u50cf\u7d20\u70b9\uff0c\u76f8\u5f53\u4e8e\u56fe\u7247\u653e\u5927\u4e86\u4e00\u500d\uff0c\u56e0\u6b64\u56fe\u7247\u4f1a\u53d8\u5f97\u6a21\u7cca\uff0c\u8fd9\u4e5f\u662f1px\u5728retina \u5c4f\u4e0a\u53d8\u7c97\u7684\u539f\u56e0\u3002 \u89e3\u51b3\uff1a \u5c06canvas-width\u548ccanvas-height\u90fd\u653e\u59272\u500d\uff0c\u5728\u901a\u8fc7style\u5c06canvas\u7684\u663e\u793awidth,height\u7f29\u5c0f2 \u500d. \u4f8b\u5982\uff1a &lt;canvas width=&#8221;320&#8243; height=&#8221;180&#8243; style=&#8221;width:160px;height:90px;&#8221;&gt;&lt;\/canvas&gt; \u767b\u5f55\u540e\u590d\u5236 \u95ee\u98982:\u5982\u4f55\u5904\u7406px\u548crpx\u7684\u8f6c\u6362\uff1f rpx\u662f\u5c0f\u7a0b\u5e8f\u91cc\u7279\u6709\u7684\u5c3a\u5bf8\u5355\u4f4d\uff0c\u53ef\u4ee5\u6839\u636e\u5c4f\u5e55\u7684\u5bbd\u5ea6\u8fdb\u884c\u81ea\u9002\u5e94\uff0c\u800c\u5728iphone6\/iphonex\u4e0a\uff0c1rpx\u7b49\u4e8e\u4e0d\u540c\u7684px\u3002\u6240\u4ee5\u5f88\u53ef\u80fd\u4f1a\u5bfc\u81f4\u5728\u4e0d\u540c\u624b\u673a\u4e0b\uff0c\u4f60\u7684canvas\u5c55\u793a\u4e0d\u4e00\u81f4\u3002 \u5728\u7ed8\u5236\u6d77\u62a5\u7684\u4e4b\u524d\uff0c\u6211\u4eec\u62ff\u5230\u7684\u8bbe\u8ba1\u7a3f\u4e00\u822c\u90fd\u662f\u57fa\u4e8eiphone6\u76842\u500d\u56fe\u3002\u800c\u4e14\u4ece\u4e0a\u4e00\u4e2a\u95ee\u9898\u7684\u89e3\u51b3\uff0c\u6211\u4eec\u77e5\u9053canvas\u7684\u5927\u5c0f\u4e5f\u662f2\u500d\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u91cf\u53d62\u500d\u56fe\u7684\u8bbe\u8ba1\u7a3f\u76f4\u63a5\u7ed8\u5236canvas\uff0c\u800c\u5c3a\u5bf8\u9700\u8981\u6ce8\u610f\u4e00\u4e0brpxtoPx. \/** * * @param {*} rpx * @param {*} int \/\/\u662f\u5426\u53d8\u6210\u6574\u6570 factor =&gt; 0.5 \/\/iphone6 pixelRatio =&gt; 2 \u50cf\u7d20\u6bd4 *\/ toPx(rpx, int) { if (int) { return parseInt(rpx * this.factor * this.pixelRatio) } return [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-33331","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=33331"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33331\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}