{"id":309,"date":"2018-04-26T13:42:48","date_gmt":"2018-04-26T05:42:48","guid":{"rendered":"https:\/\/www.myway5.com\/?p=309"},"modified":"2023-07-05T21:50:50","modified_gmt":"2023-07-05T13:50:50","slug":"canvas-perf","status":"publish","type":"post","link":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/","title":{"rendered":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3"},"content":{"rendered":"

\u7b80\u4ecb<\/h2>\n

H5\u4e2d\u5f15\u5165\u4e86\u5bf9canvas\u7684\u652f\u6301\uff0c\u4f7f\u5f97\u7f51\u9875\u7684\u8868\u8fbe\u80fd\u529b\u66f4\u52a0\u4e30\u5bcc\u4e86\u3002\u7a0b\u5e8f\u5458\u53ef\u4ee5\u901a\u8fc7canvas\u6765\u7ed8\u5236\u590d\u6742\u7684\u56fe\u5f62\uff0c\u751a\u81f3\u662f\u6e38\u620f\u3002\u56e0\u4e3a\u5de5\u4f5c\u4e2d\u7684\u9700\u6c42\uff0c\u9700\u8981\u4f7f\u7528canvas\u5728\u7f51\u9875\u4e0a\u7ed8\u5236\u5bb6\u8c31\u3002\u5177\u4f53\u7684\u7b97\u6cd5\u53ef\u4ee5\u770b\u4e4b\u524d\u7684\u4e00\u7bc7\u603b\u7ed3\uff1a\u6811\u7684\u53ef\u89c6\u5316\u4ee5\u53ca\u5bb6\u8c31\u7ed8\u5236\u7684\u7b97\u6cd5
\n<\/a>\u3002\u5f53\u5bb6\u8c31\u4e2d\u7684\u6570\u636e\u91cf\u53d8\u5927\u4e4b\u540e\uff0c\u6574\u4e2a\u7ed8\u5236\u8fc7\u7a0b\u4f1a\u53d8\u7684\u5f88\u5361\uff08800\u5de6\u53f3\u4eba\u7269\u7684\u5bb6\u8c311000\u6b21\u7ed8\u5236\u5c45\u7136\u9700\u898125s\u5de6\u53f3\uff09\u3002\u4f46\u662f\u5728\u505a\u5b8c\u4f18\u5316\u540e\uff0c1000\u6b21\u7ed8\u5236\u53ea\u9700\u89810.15s\u5de6\u53f3\u3002<\/p>\n

\"\u5bb6\u8c31\u793a\u4f8b\"<\/p>\n

\u76ee\u524d\u7684\u5bb6\u8c31\u7ed8\u5236\u5171\u6709\u4e24\u90e8\u5206\u3002\u4e00\u4e2a\u662f\u5bb6\u8c31\u7684\u4e3b\u4f53\uff0c\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u9f20\u6807\u3001\u6eda\u8f6e\u53bb\u4efb\u610f\u7684\u6d4f\u89c8\uff1b\u4e00\u4e2a\u662f\u5de6\u4e0a\u89d2\u7684\u5c0f\u5730\u56fe\u529f\u80fd\uff0c\u5e2e\u52a9\u7528\u6237\u4e86\u89e3\u5230\u5f53\u524d\u6d4f\u89c8\u7684\u4f4d\u7f6e\uff0c\u5c0f\u5730\u56fe\u4e2d\u7684\u6709\u8272\u65b9\u5757\u5c31\u662f\u7528\u6237\u6574\u4e2a\u5c4f\u5e55\u663e\u793a\u7684\u5185\u5bb9\u3002<\/p>\n

\u4f18\u5316\u63aa\u65bd\u4e00\uff1a\u7f13\u5b58<\/h2>\n

\u7f13\u5b58\u662f\u5728\u7edd\u5927\u591a\u6570\u7cfb\u7edf\u4e2d\u7ecf\u5e38\u7528\u5230\u7684\u63d0\u5347\u6027\u80fd\u7684\u65b9\u6cd5\uff0c\u5178\u578b\u7684\u4ee5\u7a7a\u95f4\u6362\u65f6\u95f4\u3002\u5728canvas\u4e2d\u5f53\u7136\u4e5f\u53ef\u4ee5\u4f7f\u7528\u7f13\u5b58\u3002\u5728\u5bb6\u8c31\u7684\u6bcf\u4e00\u6b21\u7ed8\u5236\u4e2d\uff0c\u90fd\u8981\u904d\u5386\u6240\u6709\u7684\u4eba\u7269\uff0c\u7136\u540e\u8ba1\u7b97\u4ed6\u4eec\u7684\u4f4d\u7f6e\u5927\u5c0f\uff0c\u7136\u540e\u7ed8\u5236\u5230\u754c\u9762\u4e0a\uff0c\u7136\u540e\u8fd8\u8981\u904d\u5386\u6240\u6709\u7684\u8def\u5f84\u518d\u6b21\u8fdb\u884c\u7ed8\u5236\u3002\u800c\u4f7f\u7528\u7f13\u5b58\u7684\u76ee\u7684\u5c31\u662f\u907f\u514d\u8fd9\u4e00\u90e8\u5206\u7684\u8ba1\u7b97\u3002\u56e0\u6b64\uff0c\u5728\u4efb\u4f55\u590d\u6742\u8ba1\u7b97\u540e\u7684\u7ed8\u5236\uff0c\u90fd\u80fd\u4f7f\u7528\u7f13\u5b58\u6765\u63d0\u5347\u6027\u80fd\u3002<\/p>\n

\u5728canvas\u4e2d\u6709\u8fd9\u6837\u4e00\u4e2a\u65b9\u6cd5\uff0cCanvasRenderingContext2D.drawImage(image, dx, dy)<\/code>\uff0cimage<\/code>\u53c2\u6570\u4ee3\u8868\u8981\u7ed8\u5236\u7684\u56fe\u7247\u6e90\uff0c\u4e0d\u4ec5\u4ec5\u53ef\u4ee5\u662f\u4e00\u4e2aimage\u5bf9\u8c61\uff0c\u8fd8\u53ef\u4ee5\u662f\u4e00\u4e2acanvas\u5bf9\u8c61\u3002\u6240\u4ee5\u5982\u679c\u6211\u4eec\u5c06\u4e00\u4e2a\u590d\u6742\u7684\u56fe\u5f62\u4f5c\u4e3acanvas\u5bf9\u8c61\u7f13\u5b58\u8d77\u6765\uff0c\u7136\u540e\u76f4\u63a5\u4f7f\u7528drawImage<\/code>\u65b9\u6cd5\u53bb\u7ed8\u5236\u5230\u753b\u9762\u4e0a\uff0c\u5c31\u80fd\u51cf\u5c11\u5f88\u591a\u7684\u91cd\u590d\u8ba1\u7b97\uff0c\u6765\u63d0\u5347\u6027\u80fd\u3002<\/p>\n

\u4f8b\u5982\u4ee5\u4e0b\u7684\u4f2a\u4ee3\u7801<\/p>\n

function paintPerson() {\n    \/\/ paint \n}\n\nfunction paintFamilyTree() {\n    for(var i = 0; i < 10000; i++) {\n        paintPerson()\n    }\n}\n\n\/\/ \u7528\u6237\u79fb\u52a8\u9f20\u6807\u5c31\u9700\u8981\u91cd\u7ed8\u65cf\u8c31\ndom.addEventListener(\"mousemove\", function() {\n    paintFamilyTree()\n}\n\n<\/code><\/pre>\n
\u7528\u6237\u6bcf\u4e00\u6b21\u79fb\u52a8\u9f20\u6807\uff0c\u90fd\u9700\u898110000\u6b21\u7684\u5faa\u73af\u53bb\u753b\u3002\u6240\u4ee5\u6211\u4eec\u4f7f\u7528\u4e0b\u9762\u7684\u65b9\u6cd5\uff0c\u4f7f\u5f97\u53ea\u9700\u8981\u8ba1\u7b97\u4e00\u6b21<\/p>\n
function paintPerson() {\n    \/\/ paint \n}\n\nfunction paintFamilyTree() {\n    for(var i = 0; i < 10000; i++) {\n        paintPerson()\n    }\n}\n\nvar canvasObj = cache(paintFamilyTree) \/\/ \u7f13\u5b58\u8fd9\u6b21\u7ed8\u5236\u7684\u7ed3\u679c\u3002\n\ndom.addEventListener(\"mousemove\", function() {\n    ctx.drawImage(canvasObj,0,0)\n}\n\n<\/code><\/pre>\n
\u90a3\u4e48\u5982\u4f55\u53bb\u7f13\u5b58\u8fd9\u4e2a canvas \u5bf9\u8c61\u5462\uff1f\u53ef\u4ee5\u4f7f\u7528document.createElement('canvas')<\/code>\u6765\u521b\u5efa\u4e00\u4e2a\u4e0d\u5728\u9875\u9762\u4e0a\u663e\u793a\u7684 canvas \u5bf9\u8c61\uff0c\u4e00\u822c\u4e5f\u79f0\u5b83\u4e3a\u79bb\u5c4f\u753b\u5e03<\/code>\uff0c\u8fd9\u91cc\u7528\u53d8\u91cf offScreenCanvas \u6765\u79f0\u547c\u3002\u7136\u540e\u5c06\u7ed8\u5236\u7684\u56fe\u5f62\u753b\u5728\u8fd9\u4e2a canvas \u4e0a\uff0c\u4e4b\u540e\u8c03\u7528 ctx.drawImage(offScreenCanvas,0,0)<\/code> \u5373\u53ef\u3002<\/p>\n
\u5728\u521b\u5efa\u8fd9\u4e2a\u79bb\u5c4f\u753b\u5e03\u7684\u65f6\u5019\uff0c\u6211\u4eec\u4e5f\u8981\u8bbe\u7f6e\u5408\u9002\u7684\u5bbd\u9ad8\uff0c\u8fd9\u6837\u4e5f\u6709\u52a9\u4e8e\u63d0\u5347\u6027\u80fd\u3002<\/p>\n
\u53ef\u4ee5\u53c2\u8003\u8fd9\u4e2a\u4f8b\u5b50\u6765\u611f\u53d7\u4e00\u4e0b\u6027\u80fd\u5dee\u8ddd\uff1a
\n\u79bb\u5c4f\u753b\u5e03\u7f13\u5b58\u6765\u63d0\u5347\u9875\u9762\u6027\u80fd<\/a>
\n\u4f8b\u5b50\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>\u79bb\u5c4fcanvas\u5b9e\u4f8b<\/title>\n        <style>\n            .main-wrapper {\n                width: 800px;\n                margin: 10px auto;\n            }\n        <\/style>\n    <\/head>\n\n    <body onload=\"init()\">\n        <div class=\"main-wrapper\">\n            <canvas width=\"800\" height=\"600\" style=\"border: 1px solid #ccc\" id=\"canvas\">\n                \u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301canvas\n            <\/canvas>\n            <br><br><br><br><br><br><br><br><br>\n            <div id=\"result\"><\/div>\n            <br>\n            \u6e32\u67d3\u6b21\u6570:<input type=\"number\" id=\"times\" value=\"1000\">,\u5171\u8017\u65f6(ms)<span id=\"time_used\">0<\/span><br>\n            <button onclick=\"doTest(false,false)\">\u4e0d\u4f7f\u7528\u79bb\u5c4fcanvas<\/button>\n            <button onclick=\"doTest(true,false)\">\u4f7f\u7528\u79bb\u5c4fcanvas<\/button>\n            <button onclick=\"doTest(true,true)\">\u4f7f\u7528\u79bb\u5c4fcanvas\u5e76\u8bbe\u7f6e\u6b63\u786e\u7684\u9ad8\u5ea6<\/button>\n        <\/div>\n        <script>\n            \/**\n             * \u79bb\u5c4f\u7f13\u5b58\uff0cnum\u4e3a\u7f13\u5b58canvas\u7684\u6570\u91cf\n             *\/\n            var OffScreenCache = function (num) {\n                this.canvases = [];\n                for (i = 0; i < num; i++) {\n                    this.canvases.push(document.createElement(\"canvas\"));\n                }\n            }\n            OffScreenCache.prototype = {\n                pop: function() {\n                    return this.canvases.pop();\n                },\n                push: function(canvas) {\n                    this.canvases.push(canvas);\n                },\n                destroy: function() {\n                    this.canvases = null;\n                }\n            }\n            var Ball = function (color) {\n                this.radius = 50;\n                this.lineWidth = 4;\n                this.cache = null;\n                this.color = color;\n            }\n            Ball.prototype = {\n                paint: function(ctx, x, y) {\n                    ctx.save();\n                    ctx.lineWidth = this.lineWidth;\n                    ctx.strokeStyle = this.color;\n                    for (i = 1; i < this.radius; i+= this.lineWidth) {\n                        ctx.beginPath();\n                        ctx.arc(x, y, i, 0, Math.PI*2,true); \/\/ \u7ed8\u5236\n                        ctx.stroke();\n                    }\n                    ctx.restore();\n                },\n                useCache: function (cacheCanvas, autoSet) {\n                    if (autoSet) {\n                        cacheCanvas.width = this.radius * 2;\n                        cacheCanvas.height = this.radius * 2;\n                    }\n                    cacheCtx = cacheCanvas.getContext('2d')\n                    this.paint(cacheCtx, cacheCanvas.width \/ 2, cacheCanvas.height \/ 2)\n                    this.cache = cacheCanvas\n                }\n            }\n            \/******************** \u4e0b\u9762\u662f\u6267\u884c\u4ee3\u7801 **************************\/\n            var g_canvas, g_ctx;\n            var g_width = 800;\n            var g_height = 600;\n            function init() {\n                g_canvas = document.getElementById(\"canvas\");\n                g_ctx = g_canvas.getContext('2d');\n            }\n            function getRandomPos() {\n                var x = Math.random() * g_width\n                var y = Math.random() * g_height\n                return {x:x, y:y}\n            }\n            function showResult(ballCount) {\n                var dom = document.getElementById(\"result\");\n                dom.innerHTML = \"\";\n                var str = \"\";\n                for (var key of Object.keys(ballCount)) {\n                    str += \"<span>\" + key + \"ball\uff1a\" + ballCount[key] + \"<\/span>\u00a0\u00a0\u00a0\u00a0\"\n                }\n                dom.innerHTML = str;\n            }\n            function doTest(useCache, autoSet) {\n                g_ctx.clearRect(0, 0, g_width, g_height)\n                var startTime = Date.now();\n                var times = document.getElementById(\"times\").value\n                var colorArray = ['red', 'blue', 'green', 'black', 'pink']   \/\/ \u5171\u7ed8\u52365\u79cd\u989c\u8272\n                var ballCount = {};\n                colorArray.forEach(function(color) {\n                    ballCount[color] = 0;\n                })\n                if (useCache) {\n                    var colorBall = [];\n                    var cacheCanvases = new OffScreenCache(colorArray.length);\n                    for (var i = 0; i < colorArray.length; i++) {\n                        var ball = new Ball(colorArray[i]);\n                        var cacheCanvas = cacheCanvases.pop();\n                        ball.useCache(cacheCanvas, autoSet)\n                        colorBall.push(ball)\n                    }\n                    for (var i = 0; i < times; i++) {\n                        ball = colorBall[i % 5]\n                        ballCount[ball.color]++;\n                        var pos = getRandomPos()\n                        g_ctx.drawImage(ball.cache, pos.x, pos.y)       \/\/ \u5f00\u59cb\u753b\n                    }\n                } else {\n                    for (var i = 0; i < times; i++) {\n                        var color = colorArray[i % 5];\n                        var ball = new Ball(color)\n                        var pos = getRandomPos()\n                        ball.paint(g_ctx, pos.x, pos.y)               \/\/ \u5f00\u59cb\u753b\n                        ballCount[color]++;\n                    }\n                }\n                var endTime = Date.now();\n                document.getElementById(\"time_used\").innerText = endTime - startTime;\n                showResult(ballCount)\n            }\n        <\/script>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n
\u4f18\u5316\u63aa\u65bd\u4e8c\uff1a\u5206\u5c42<\/h2>\n
\u5728\u4e0a\u8ff0\u7684\u65cf\u8c31\u56fe\u7247\u4e2d\uff0c\u5de6\u4e0a\u89d2\u7684\u5c0f\u5730\u56fe\u5176\u5b9e\u662f\u6709\u4e24\u4e2acanvas\u91cd\u53e0\u800c\u6210\u3002\u5e95\u5c42\u7684canvas\u7ed8\u5236\u65cf\u8c31\u7684\u7f29\u7565\u56fe\uff0c\u4e0a\u5c42\u7684canvas\u7ed8\u5236\u5c0f\u65b9\u6846\u3002\u8fd9\u6837\u5728\u5c0f\u65b9\u6846\u79fb\u52a8\u65f6\uff0c\u53ea\u9700\u6e05\u7a7a\u4e0a\u5c42canvas\u7684\u5c40\u90e8\u753b\u5e03\u91cd\u7ed8\u5c0f\u65b9\u6846\u5373\u53ef\uff0c\u4e0d\u9700\u8981\u91cd\u7ed8\u5e95\u5c42\u7684\u7f29\u7565\u56fe\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u7b80\u4ecb H5\u4e2d\u5f15\u5165\u4e86\u5bf9canvas\u7684\u652f\u6301\uff0c\u4f7f\u5f97\u7f51\u9875\u7684\u8868\u8fbe\u80fd\u529b\u66f4\u52a0\u4e30\u5bcc\u4e86\u3002\u7a0b\u5e8f\u5458\u53ef\u4ee5\u901a\u8fc7canvas\u6765\u7ed8\u5236\u590d\u6742\u7684\u56fe … \u7ee7\u7eed\u9605\u8bfbCanvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,19],"tags":[51,50],"class_list":["post-309","post","type-post","status-publish","format-standard","hentry","category-frontend","category-work","tag-canvas","tag-html5"],"yoast_head":"\nCanvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b\" \/>\n<meta property=\"og:description\" content=\"\u7b80\u4ecb H5\u4e2d\u5f15\u5165\u4e86\u5bf9canvas\u7684\u652f\u6301\uff0c\u4f7f\u5f97\u7f51\u9875\u7684\u8868\u8fbe\u80fd\u529b\u66f4\u52a0\u4e30\u5bcc\u4e86\u3002\u7a0b\u5e8f\u5458\u53ef\u4ee5\u901a\u8fc7canvas\u6765\u7ed8\u5236\u590d\u6742\u7684\u56fe … \u7ee7\u7eed\u9605\u8bfbCanvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\" \/>\n<meta property=\"og:site_name\" content=\"\u4e00\u53ea\u5b89\u9759\u7684\u732b\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-26T05:42:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-05T13:50:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png\" \/>\n<meta name=\"author\" content=\"jiangpengfei\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"jiangpengfei\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\"},\"author\":{\"name\":\"jiangpengfei\",\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685\"},\"headline\":\"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3\",\"datePublished\":\"2018-04-26T05:42:48+00:00\",\"dateModified\":\"2023-07-05T13:50:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\"},\"wordCount\":20,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685\"},\"image\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png\",\"keywords\":[\"canvas\",\"html5\"],\"articleSection\":[\"\u524d\u7aef\",\"\u5de5\u4f5c\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\",\"url\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\",\"name\":\"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b\",\"isPartOf\":{\"@id\":\"https:\/\/www.myway5.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png\",\"datePublished\":\"2018-04-26T05:42:48+00:00\",\"dateModified\":\"2023-07-05T13:50:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage\",\"url\":\"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png\",\"contentUrl\":\"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.myway5.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.myway5.com\/#website\",\"url\":\"https:\/\/www.myway5.com\/\",\"name\":\"\u4e00\u53ea\u5b89\u9759\u7684\u732b\",\"description\":\"\u60f3\u5565\u5462\",\"publisher\":{\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.myway5.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685\",\"name\":\"jiangpengfei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f8c7de757f6e0247412bcfd31b7c2271?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f8c7de757f6e0247412bcfd31b7c2271?s=96&d=monsterid&r=g\",\"caption\":\"jiangpengfei\"},\"logo\":{\"@id\":\"https:\/\/www.myway5.com\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/www.myway5.com\/index.php\/author\/joyme\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/","og_locale":"zh_CN","og_type":"article","og_title":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b","og_description":"\u7b80\u4ecb H5\u4e2d\u5f15\u5165\u4e86\u5bf9canvas\u7684\u652f\u6301\uff0c\u4f7f\u5f97\u7f51\u9875\u7684\u8868\u8fbe\u80fd\u529b\u66f4\u52a0\u4e30\u5bcc\u4e86\u3002\u7a0b\u5e8f\u5458\u53ef\u4ee5\u901a\u8fc7canvas\u6765\u7ed8\u5236\u590d\u6742\u7684\u56fe … \u7ee7\u7eed\u9605\u8bfbCanvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3","og_url":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/","og_site_name":"\u4e00\u53ea\u5b89\u9759\u7684\u732b","article_published_time":"2018-04-26T05:42:48+00:00","article_modified_time":"2023-07-05T13:50:50+00:00","og_image":[{"url":"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png","type":"","width":"","height":""}],"author":"jiangpengfei","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"jiangpengfei","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"1 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#article","isPartOf":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/"},"author":{"name":"jiangpengfei","@id":"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685"},"headline":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3","datePublished":"2018-04-26T05:42:48+00:00","dateModified":"2023-07-05T13:50:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/"},"wordCount":20,"commentCount":0,"publisher":{"@id":"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685"},"image":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png","keywords":["canvas","html5"],"articleSection":["\u524d\u7aef","\u5de5\u4f5c"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/","url":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/","name":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3 - \u4e00\u53ea\u5b89\u9759\u7684\u732b","isPartOf":{"@id":"https:\/\/www.myway5.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage"},"image":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png","datePublished":"2018-04-26T05:42:48+00:00","dateModified":"2023-07-05T13:50:50+00:00","breadcrumb":{"@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#primaryimage","url":"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png","contentUrl":"https:\/\/www.myway5.com\/wp-content\/uploads\/2018\/04\/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20180426122444.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.myway5.com\/index.php\/2018\/04\/26\/canvas-perf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.myway5.com\/"},{"@type":"ListItem","position":2,"name":"Canvas\u6027\u80fd\u4f18\u5316\u5c0f\u7ed3"}]},{"@type":"WebSite","@id":"https:\/\/www.myway5.com\/#website","url":"https:\/\/www.myway5.com\/","name":"\u4e00\u53ea\u5b89\u9759\u7684\u732b","description":"\u60f3\u5565\u5462","publisher":{"@id":"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.myway5.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/www.myway5.com\/#\/schema\/person\/b19267e8b106343431e163ec96950685","name":"jiangpengfei","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.myway5.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f8c7de757f6e0247412bcfd31b7c2271?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f8c7de757f6e0247412bcfd31b7c2271?s=96&d=monsterid&r=g","caption":"jiangpengfei"},"logo":{"@id":"https:\/\/www.myway5.com\/#\/schema\/person\/image\/"},"url":"https:\/\/www.myway5.com\/index.php\/author\/joyme\/"}]}},"views":7302,"_links":{"self":[{"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/posts\/309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/comments?post=309"}],"version-history":[{"count":3,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/posts\/309\/revisions"}],"predecessor-version":[{"id":1593,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/posts\/309\/revisions\/1593"}],"wp:attachment":[{"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/media?parent=309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/categories?post=309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.myway5.com\/index.php\/wp-json\/wp\/v2\/tags?post=309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}