[{"data":1,"prerenderedAt":1732},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fcanvas-vs-svg":3,"docs-all":1631},{"id":4,"title":5,"body":6,"category":1617,"date":1618,"description":1619,"draft":1620,"extension":1621,"meta":1622,"navigation":438,"path":1623,"seo":1624,"source":1625,"stem":1626,"tags":1627,"__hash__":1630},"docs\u002Fdocs\u002Fcanvas-vs-svg.md","Canvas 与 SVG 绘图方案选型",{"type":7,"value":8,"toc":1611},"minimark",[9,13,88,97,101,111,120,131,630,633,646,662,668,1013,1017,1026,1579,1582,1586,1608],[10,11,12],"h1",{"id":12},"绘制",[14,15,16,32],"table",{},[17,18,19],"thead",{},[20,21,22,26,29],"tr",{},[23,24,25],"th",{},"方案",[23,27,28],{},"优点",[23,30,31],{},"缺点",[33,34,35,47,71],"tbody",{},[20,36,37,41,44],{},[38,39,40],"td",{},"纯 HTML",[38,42,43],{},"简单，通过CSS即可绘制",[38,45,46],{},"难以绘制复杂图形",[20,48,49,52,62],{},[38,50,51],{},"Canvas",[38,53,54,55,58,59,61],{},"1. 基于像素，内存占用恒定",[56,57],"br",{},"2. 一张图只存在一个 HTML 元素",[56,60],{},"3. 大规模数据下，性能表现比svg 好",[38,63,64,65,67,68,70],{},"1. 事件交互基于整张画布，根据坐标计算出节点，编程方式繁琐",[56,66],{},"2. 不支持插入 HTML 元素，不支持 CSS 修改样式",[56,69],{},"3. 因为基于像素，大屏幕下渲染时间长",[20,72,73,76,85],{},[38,74,75],{},"Svg",[38,77,78,79,81,82,84],{},"1. 基于矢量，缩放不会失真",[56,80],{},"2. 基于 DOM，学习、编程成本低，事件交互都是基于 DOM，并且支持 CSS，使用方便",[56,83],{},"3. 适合静态图像，基于 Svg 也可以做转换",[38,86,87],{},"因为基于 DOM，当图的元素数量较多的时候，渲染性能比较低",[89,90,91,92,96],"p",{},"流程图场景下，不需要渲染大量的节点，对动画的要求也不高，可以使用",[93,94,95],"code",{},"Svg + HTML"," 实现。",[98,99,51],"h2",{"id":100},"canvas",[89,102,103,105,106,110],{},[93,104,51],{}," 适合绘制",[107,108,109],"strong",{},"图形密集且需要频繁更新","的场景。",[89,112,113,115,116,119],{},[93,114,51],{},"是",[93,117,118],{},"HTML5","提供的绘图 api，允许在网页上进行即时的图形绘制。通常用于游戏开发、可视化、图像处理等场景。",[121,122,123],"ul",{},[124,125,126,127,130],"li",{},"绘制一个",[93,128,129],{},"canvas ","图片",[132,133,138],"pre",{"className":134,"code":135,"language":136,"meta":137,"style":137},"language-html shiki shiki-themes github-light github-dark","\u003Cbody>\n    \u003Ch1>绘制canvas\u003C\u002Fh1>\n    \u003Ccanvas id=\"canvas\" width=\"200\" height=\"200\">\u003C\u002Fcanvas>\n    \u003Cbutton id=\"btn\">绘制\u003C\u002Fbutton>\n    \u003Ccanvas id=\"canvas2\" width=\"200\" height=\"200\">\u003C\u002Fcanvas>\n    \u003Cscript>\n        const canvas = document.getElementById(\"canvas\");\n        const ctx = canvas.getContext(\"2d\");\n        ctx.fillStyle = \"dodgerblue\";\n        ctx.fillRect(10, 10, 180, 180);\n        ctx.fillStyle = \"black\";\n        ctx.font = \"20px Arial\";\n        ctx.fillText(\"Fa-ce\", 10, 30);        \n        ctx.strokeStyle = \"deeppink\";\n\n        const btn = document.getElementById(\"btn\");\n        btn.addEventListener(\"click\", () => {\n            const canvas2 = document.getElementById(\"canvas2\");\n            const ctx2 = canvas2.getContext(\"2d\");\n            ctx2.beginPath();\n            ctx2.moveTo(75, 50);\n            ctx2.lineTo(100, 75);\n            ctx2.lineTo(100, 25);\n            ctx2.fill();\n        });\n    \u003C\u002Fscript>\n\u003C\u002Fbody>\n","html","",[93,139,140,156,171,211,233,265,275,303,326,340,370,382,395,420,433,440,460,483,504,525,537,557,576,594,604,610,620],{"__ignoreMap":137},[141,142,145,149,153],"span",{"class":143,"line":144},"line",1,[141,146,148],{"class":147},"sVt8B","\u003C",[141,150,152],{"class":151},"s9eBZ","body",[141,154,155],{"class":147},">\n",[141,157,159,162,164,167,169],{"class":143,"line":158},2,[141,160,161],{"class":147},"    \u003C",[141,163,10],{"class":151},[141,165,166],{"class":147},">绘制canvas\u003C\u002F",[141,168,10],{"class":151},[141,170,155],{"class":147},[141,172,174,176,178,182,185,189,192,194,197,200,202,204,207,209],{"class":143,"line":173},3,[141,175,161],{"class":147},[141,177,100],{"class":151},[141,179,181],{"class":180},"sScJk"," id",[141,183,184],{"class":147},"=",[141,186,188],{"class":187},"sZZnC","\"canvas\"",[141,190,191],{"class":180}," width",[141,193,184],{"class":147},[141,195,196],{"class":187},"\"200\"",[141,198,199],{"class":180}," height",[141,201,184],{"class":147},[141,203,196],{"class":187},[141,205,206],{"class":147},">\u003C\u002F",[141,208,100],{"class":151},[141,210,155],{"class":147},[141,212,214,216,219,221,223,226,229,231],{"class":143,"line":213},4,[141,215,161],{"class":147},[141,217,218],{"class":151},"button",[141,220,181],{"class":180},[141,222,184],{"class":147},[141,224,225],{"class":187},"\"btn\"",[141,227,228],{"class":147},">绘制\u003C\u002F",[141,230,218],{"class":151},[141,232,155],{"class":147},[141,234,236,238,240,242,244,247,249,251,253,255,257,259,261,263],{"class":143,"line":235},5,[141,237,161],{"class":147},[141,239,100],{"class":151},[141,241,181],{"class":180},[141,243,184],{"class":147},[141,245,246],{"class":187},"\"canvas2\"",[141,248,191],{"class":180},[141,250,184],{"class":147},[141,252,196],{"class":187},[141,254,199],{"class":180},[141,256,184],{"class":147},[141,258,196],{"class":187},[141,260,206],{"class":147},[141,262,100],{"class":151},[141,264,155],{"class":147},[141,266,268,270,273],{"class":143,"line":267},6,[141,269,161],{"class":147},[141,271,272],{"class":151},"script",[141,274,155],{"class":147},[141,276,278,282,286,289,292,295,298,300],{"class":143,"line":277},7,[141,279,281],{"class":280},"szBVR","        const",[141,283,285],{"class":284},"sj4cs"," canvas",[141,287,288],{"class":280}," =",[141,290,291],{"class":147}," document.",[141,293,294],{"class":180},"getElementById",[141,296,297],{"class":147},"(",[141,299,188],{"class":187},[141,301,302],{"class":147},");\n",[141,304,306,308,311,313,316,319,321,324],{"class":143,"line":305},8,[141,307,281],{"class":280},[141,309,310],{"class":284}," ctx",[141,312,288],{"class":280},[141,314,315],{"class":147}," canvas.",[141,317,318],{"class":180},"getContext",[141,320,297],{"class":147},[141,322,323],{"class":187},"\"2d\"",[141,325,302],{"class":147},[141,327,329,332,334,337],{"class":143,"line":328},9,[141,330,331],{"class":147},"        ctx.fillStyle ",[141,333,184],{"class":280},[141,335,336],{"class":187}," \"dodgerblue\"",[141,338,339],{"class":147},";\n",[141,341,343,346,349,351,354,357,359,361,364,366,368],{"class":143,"line":342},10,[141,344,345],{"class":147},"        ctx.",[141,347,348],{"class":180},"fillRect",[141,350,297],{"class":147},[141,352,353],{"class":284},"10",[141,355,356],{"class":147},", ",[141,358,353],{"class":284},[141,360,356],{"class":147},[141,362,363],{"class":284},"180",[141,365,356],{"class":147},[141,367,363],{"class":284},[141,369,302],{"class":147},[141,371,373,375,377,380],{"class":143,"line":372},11,[141,374,331],{"class":147},[141,376,184],{"class":280},[141,378,379],{"class":187}," \"black\"",[141,381,339],{"class":147},[141,383,385,388,390,393],{"class":143,"line":384},12,[141,386,387],{"class":147},"        ctx.font ",[141,389,184],{"class":280},[141,391,392],{"class":187}," \"20px Arial\"",[141,394,339],{"class":147},[141,396,398,400,403,405,408,410,412,414,417],{"class":143,"line":397},13,[141,399,345],{"class":147},[141,401,402],{"class":180},"fillText",[141,404,297],{"class":147},[141,406,407],{"class":187},"\"Fa-ce\"",[141,409,356],{"class":147},[141,411,353],{"class":284},[141,413,356],{"class":147},[141,415,416],{"class":284},"30",[141,418,419],{"class":147},");        \n",[141,421,423,426,428,431],{"class":143,"line":422},14,[141,424,425],{"class":147},"        ctx.strokeStyle ",[141,427,184],{"class":280},[141,429,430],{"class":187}," \"deeppink\"",[141,432,339],{"class":147},[141,434,436],{"class":143,"line":435},15,[141,437,439],{"emptyLinePlaceholder":438},true,"\n",[141,441,443,445,448,450,452,454,456,458],{"class":143,"line":442},16,[141,444,281],{"class":280},[141,446,447],{"class":284}," btn",[141,449,288],{"class":280},[141,451,291],{"class":147},[141,453,294],{"class":180},[141,455,297],{"class":147},[141,457,225],{"class":187},[141,459,302],{"class":147},[141,461,463,466,469,471,474,477,480],{"class":143,"line":462},17,[141,464,465],{"class":147},"        btn.",[141,467,468],{"class":180},"addEventListener",[141,470,297],{"class":147},[141,472,473],{"class":187},"\"click\"",[141,475,476],{"class":147},", () ",[141,478,479],{"class":280},"=>",[141,481,482],{"class":147}," {\n",[141,484,486,489,492,494,496,498,500,502],{"class":143,"line":485},18,[141,487,488],{"class":280},"            const",[141,490,491],{"class":284}," canvas2",[141,493,288],{"class":280},[141,495,291],{"class":147},[141,497,294],{"class":180},[141,499,297],{"class":147},[141,501,246],{"class":187},[141,503,302],{"class":147},[141,505,507,509,512,514,517,519,521,523],{"class":143,"line":506},19,[141,508,488],{"class":280},[141,510,511],{"class":284}," ctx2",[141,513,288],{"class":280},[141,515,516],{"class":147}," canvas2.",[141,518,318],{"class":180},[141,520,297],{"class":147},[141,522,323],{"class":187},[141,524,302],{"class":147},[141,526,528,531,534],{"class":143,"line":527},20,[141,529,530],{"class":147},"            ctx2.",[141,532,533],{"class":180},"beginPath",[141,535,536],{"class":147},"();\n",[141,538,540,542,545,547,550,552,555],{"class":143,"line":539},21,[141,541,530],{"class":147},[141,543,544],{"class":180},"moveTo",[141,546,297],{"class":147},[141,548,549],{"class":284},"75",[141,551,356],{"class":147},[141,553,554],{"class":284},"50",[141,556,302],{"class":147},[141,558,560,562,565,567,570,572,574],{"class":143,"line":559},22,[141,561,530],{"class":147},[141,563,564],{"class":180},"lineTo",[141,566,297],{"class":147},[141,568,569],{"class":284},"100",[141,571,356],{"class":147},[141,573,549],{"class":284},[141,575,302],{"class":147},[141,577,579,581,583,585,587,589,592],{"class":143,"line":578},23,[141,580,530],{"class":147},[141,582,564],{"class":180},[141,584,297],{"class":147},[141,586,569],{"class":284},[141,588,356],{"class":147},[141,590,591],{"class":284},"25",[141,593,302],{"class":147},[141,595,597,599,602],{"class":143,"line":596},24,[141,598,530],{"class":147},[141,600,601],{"class":180},"fill",[141,603,536],{"class":147},[141,605,607],{"class":143,"line":606},25,[141,608,609],{"class":147},"        });\n",[141,611,613,616,618],{"class":143,"line":612},26,[141,614,615],{"class":147},"    \u003C\u002F",[141,617,272],{"class":151},[141,619,155],{"class":147},[141,621,623,626,628],{"class":143,"line":622},27,[141,624,625],{"class":147},"\u003C\u002F",[141,627,152],{"class":151},[141,629,155],{"class":147},[98,631,75],{"id":632},"svg",[89,634,635,638,639,642,643,110],{},[93,636,637],{},"SVG"," 适合",[107,640,641],{},"静态图形","和需要",[107,644,645],{},"高精度",[89,647,648,650,651,654,655,657,658,661],{},[93,649,75],{},"是一种基于",[93,652,653],{},"XML","的矢量图格式(Scalable Vector Graphics)。在网页中通常通过嵌入",[93,656,653],{},"或者使用",[93,659,660],{},"js、css","进行样式、动态操作。适用于矢量图标、地图、数据可视化场景。",[121,663,664],{},[124,665,12,666,130],{},[93,667,75],{},[132,669,671],{"className":134,"code":670,"language":136,"meta":137,"style":137},"\u003Chead>\n    \u003Cstyle>\n        svg {\n            border: 1px solid #000;\n        }\n    \u003C\u002Fstyle>\n    \u003Cscript>\n        function svgClick(msg) {\n            debugger;\n            \u002F\u002F alert(msg);\n            \u002F\u002F 点击事件\n        }\n    \u003C\u002Fscript>\n\u003C\u002Fhead>    \n\u003Cbody>\n    \u003Ch1>绘制SVG\u003C\u002Fh1>\n    \u003Csvg width=\"200\" height=\"200\" style=\"border: 1px solid #000\">\n        \u003Crect\n            width=\"100\"\n            height=\"100\"\n            style=\"fill: rgb(0, 0, 255); stroke-width: 10; stroke: rgb(0, 0, 0)\"\n            onclick=\"svgClick('First Svg')\"\n        \u002F>\n    \u003C\u002Fsvg>\n    \u003Csvg width=\"200\" height=\"200\" style=\"border: 1px solid #000\">\n        \u003Ccircle\n            cx=\"100\"\n            cy=\"100\"\n            r=\"50\"\n            fill=\"red\"\n            onclick=\"svgClick('Second Svg')\"\n        \u002F>\n    \u003C\u002Fsvg>\n\u003C\u002Fbody>\n",[93,672,673,682,691,698,720,725,733,741,758,765,771,776,780,788,797,805,818,846,854,864,873,883,893,898,906,932,939,948,958,969,980,990,995,1004],{"__ignoreMap":137},[141,674,675,677,680],{"class":143,"line":144},[141,676,148],{"class":147},[141,678,679],{"class":151},"head",[141,681,155],{"class":147},[141,683,684,686,689],{"class":143,"line":158},[141,685,161],{"class":147},[141,687,688],{"class":151},"style",[141,690,155],{"class":147},[141,692,693,696],{"class":143,"line":173},[141,694,695],{"class":151},"        svg",[141,697,482],{"class":147},[141,699,700,703,706,709,712,715,718],{"class":143,"line":213},[141,701,702],{"class":284},"            border",[141,704,705],{"class":147},": ",[141,707,708],{"class":284},"1",[141,710,711],{"class":280},"px",[141,713,714],{"class":284}," solid",[141,716,717],{"class":284}," #000",[141,719,339],{"class":147},[141,721,722],{"class":143,"line":235},[141,723,724],{"class":147},"        }\n",[141,726,727,729,731],{"class":143,"line":267},[141,728,615],{"class":147},[141,730,688],{"class":151},[141,732,155],{"class":147},[141,734,735,737,739],{"class":143,"line":277},[141,736,161],{"class":147},[141,738,272],{"class":151},[141,740,155],{"class":147},[141,742,743,746,749,751,755],{"class":143,"line":305},[141,744,745],{"class":280},"        function",[141,747,748],{"class":180}," svgClick",[141,750,297],{"class":147},[141,752,754],{"class":753},"s4XuR","msg",[141,756,757],{"class":147},") {\n",[141,759,760,763],{"class":143,"line":328},[141,761,762],{"class":280},"            debugger",[141,764,339],{"class":147},[141,766,767],{"class":143,"line":342},[141,768,770],{"class":769},"sJ8bj","            \u002F\u002F alert(msg);\n",[141,772,773],{"class":143,"line":372},[141,774,775],{"class":769},"            \u002F\u002F 点击事件\n",[141,777,778],{"class":143,"line":384},[141,779,724],{"class":147},[141,781,782,784,786],{"class":143,"line":397},[141,783,615],{"class":147},[141,785,272],{"class":151},[141,787,155],{"class":147},[141,789,790,792,794],{"class":143,"line":422},[141,791,625],{"class":147},[141,793,679],{"class":151},[141,795,796],{"class":147},">    \n",[141,798,799,801,803],{"class":143,"line":435},[141,800,148],{"class":147},[141,802,152],{"class":151},[141,804,155],{"class":147},[141,806,807,809,811,814,816],{"class":143,"line":442},[141,808,161],{"class":147},[141,810,10],{"class":151},[141,812,813],{"class":147},">绘制SVG\u003C\u002F",[141,815,10],{"class":151},[141,817,155],{"class":147},[141,819,820,822,824,826,828,830,832,834,836,839,841,844],{"class":143,"line":462},[141,821,161],{"class":147},[141,823,632],{"class":151},[141,825,191],{"class":180},[141,827,184],{"class":147},[141,829,196],{"class":187},[141,831,199],{"class":180},[141,833,184],{"class":147},[141,835,196],{"class":187},[141,837,838],{"class":180}," style",[141,840,184],{"class":147},[141,842,843],{"class":187},"\"border: 1px solid #000\"",[141,845,155],{"class":147},[141,847,848,851],{"class":143,"line":485},[141,849,850],{"class":147},"        \u003C",[141,852,853],{"class":151},"rect\n",[141,855,856,859,861],{"class":143,"line":506},[141,857,858],{"class":180},"            width",[141,860,184],{"class":147},[141,862,863],{"class":187},"\"100\"\n",[141,865,866,869,871],{"class":143,"line":527},[141,867,868],{"class":180},"            height",[141,870,184],{"class":147},[141,872,863],{"class":187},[141,874,875,878,880],{"class":143,"line":539},[141,876,877],{"class":180},"            style",[141,879,184],{"class":147},[141,881,882],{"class":187},"\"fill: rgb(0, 0, 255); stroke-width: 10; stroke: rgb(0, 0, 0)\"\n",[141,884,885,888,890],{"class":143,"line":559},[141,886,887],{"class":180},"            onclick",[141,889,184],{"class":147},[141,891,892],{"class":187},"\"svgClick('First Svg')\"\n",[141,894,895],{"class":143,"line":578},[141,896,897],{"class":147},"        \u002F>\n",[141,899,900,902,904],{"class":143,"line":596},[141,901,615],{"class":147},[141,903,632],{"class":151},[141,905,155],{"class":147},[141,907,908,910,912,914,916,918,920,922,924,926,928,930],{"class":143,"line":606},[141,909,161],{"class":147},[141,911,632],{"class":151},[141,913,191],{"class":180},[141,915,184],{"class":147},[141,917,196],{"class":187},[141,919,199],{"class":180},[141,921,184],{"class":147},[141,923,196],{"class":187},[141,925,838],{"class":180},[141,927,184],{"class":147},[141,929,843],{"class":187},[141,931,155],{"class":147},[141,933,934,936],{"class":143,"line":612},[141,935,850],{"class":147},[141,937,938],{"class":151},"circle\n",[141,940,941,944,946],{"class":143,"line":622},[141,942,943],{"class":180},"            cx",[141,945,184],{"class":147},[141,947,863],{"class":187},[141,949,951,954,956],{"class":143,"line":950},28,[141,952,953],{"class":180},"            cy",[141,955,184],{"class":147},[141,957,863],{"class":187},[141,959,961,964,966],{"class":143,"line":960},29,[141,962,963],{"class":180},"            r",[141,965,184],{"class":147},[141,967,968],{"class":187},"\"50\"\n",[141,970,972,975,977],{"class":143,"line":971},30,[141,973,974],{"class":180},"            fill",[141,976,184],{"class":147},[141,978,979],{"class":187},"\"red\"\n",[141,981,983,985,987],{"class":143,"line":982},31,[141,984,887],{"class":180},[141,986,184],{"class":147},[141,988,989],{"class":187},"\"svgClick('Second Svg')\"\n",[141,991,993],{"class":143,"line":992},32,[141,994,897],{"class":147},[141,996,998,1000,1002],{"class":143,"line":997},33,[141,999,615],{"class":147},[141,1001,632],{"class":151},[141,1003,155],{"class":147},[141,1005,1007,1009,1011],{"class":143,"line":1006},34,[141,1008,625],{"class":147},[141,1010,152],{"class":151},[141,1012,155],{"class":147},[98,1014,1016],{"id":1015},"css","CSS",[89,1018,1019,1021,1022,1025],{},[93,1020,1016],{},"可以绘制简单的几何图形，如矩形、圆形、多边形。在",[107,1023,1024],{},"样式控制、动画","方面有独特的优势",[132,1027,1029],{"className":134,"code":1028,"language":136,"meta":137,"style":137},"\u003Cstyle>\n    .circle {\n        width: 100px;\n        height: 100px;\n        background-color: red;\n        border-radius: 50%;\n    }\n    .rect {\n        width: 100px;\n        height: 100px;\n        background-color: blue;\n    }\n    .ellipse {\n        width: 100px;\n        height: 50px;\n        background-color: green;\n        border-radius: 50%;\n    }\n    .triangle {\n        width: 0;\n        height: 0;\n        border-left: 50px solid transparent;\n        border-right: 50px solid transparent;\n        border-bottom: 100px solid red;\n    }\n    .polygon {\n        width: 100px;\n        height: 100px;\n        background-color: yellow;\n        clip-path: polygon(0% 0%, 50% 0%, 50% 80%, 80% 100%, 0% 100%);\n    }\n\u003C\u002Fstyle>\n\n\u003Cbody>\n    \u003Ch1>CSS\u003C\u002Fh1>\n    \u003C!-- 圆形 -->\n    \u003Cdiv class=\"circle\">\u003C\u002Fdiv>\n    \u003C!-- 矩形 -->\n    \u003Cdiv class=\"rect\">\u003C\u002Fdiv>\n    \u003C!-- 椭圆 -->\n    \u003Cdiv class=\"ellipse\">\u003C\u002Fdiv>\n    \u003C!-- 三角形 -->\n    \u003Cdiv class=\"triangle\">\u003C\u002Fdiv>\n    \u003C!-- 多边形 -->\n    \u003Cdiv class=\"polygon\">\u003C\u002Fdiv>\n\u003C\u002Fbody>\n",[93,1030,1031,1039,1046,1059,1072,1084,1098,1103,1110,1122,1134,1145,1149,1156,1168,1180,1191,1203,1207,1214,1225,1235,1253,1270,1288,1292,1299,1311,1323,1334,1400,1404,1412,1416,1424,1438,1444,1466,1472,1492,1498,1518,1524,1544,1550,1570],{"__ignoreMap":137},[141,1032,1033,1035,1037],{"class":143,"line":144},[141,1034,148],{"class":147},[141,1036,688],{"class":151},[141,1038,155],{"class":147},[141,1040,1041,1044],{"class":143,"line":158},[141,1042,1043],{"class":180},"    .circle",[141,1045,482],{"class":147},[141,1047,1048,1051,1053,1055,1057],{"class":143,"line":173},[141,1049,1050],{"class":284},"        width",[141,1052,705],{"class":147},[141,1054,569],{"class":284},[141,1056,711],{"class":280},[141,1058,339],{"class":147},[141,1060,1061,1064,1066,1068,1070],{"class":143,"line":213},[141,1062,1063],{"class":284},"        height",[141,1065,705],{"class":147},[141,1067,569],{"class":284},[141,1069,711],{"class":280},[141,1071,339],{"class":147},[141,1073,1074,1077,1079,1082],{"class":143,"line":235},[141,1075,1076],{"class":284},"        background-color",[141,1078,705],{"class":147},[141,1080,1081],{"class":284},"red",[141,1083,339],{"class":147},[141,1085,1086,1089,1091,1093,1096],{"class":143,"line":267},[141,1087,1088],{"class":284},"        border-radius",[141,1090,705],{"class":147},[141,1092,554],{"class":284},[141,1094,1095],{"class":280},"%",[141,1097,339],{"class":147},[141,1099,1100],{"class":143,"line":277},[141,1101,1102],{"class":147},"    }\n",[141,1104,1105,1108],{"class":143,"line":305},[141,1106,1107],{"class":180},"    .rect",[141,1109,482],{"class":147},[141,1111,1112,1114,1116,1118,1120],{"class":143,"line":328},[141,1113,1050],{"class":284},[141,1115,705],{"class":147},[141,1117,569],{"class":284},[141,1119,711],{"class":280},[141,1121,339],{"class":147},[141,1123,1124,1126,1128,1130,1132],{"class":143,"line":342},[141,1125,1063],{"class":284},[141,1127,705],{"class":147},[141,1129,569],{"class":284},[141,1131,711],{"class":280},[141,1133,339],{"class":147},[141,1135,1136,1138,1140,1143],{"class":143,"line":372},[141,1137,1076],{"class":284},[141,1139,705],{"class":147},[141,1141,1142],{"class":284},"blue",[141,1144,339],{"class":147},[141,1146,1147],{"class":143,"line":384},[141,1148,1102],{"class":147},[141,1150,1151,1154],{"class":143,"line":397},[141,1152,1153],{"class":180},"    .ellipse",[141,1155,482],{"class":147},[141,1157,1158,1160,1162,1164,1166],{"class":143,"line":422},[141,1159,1050],{"class":284},[141,1161,705],{"class":147},[141,1163,569],{"class":284},[141,1165,711],{"class":280},[141,1167,339],{"class":147},[141,1169,1170,1172,1174,1176,1178],{"class":143,"line":435},[141,1171,1063],{"class":284},[141,1173,705],{"class":147},[141,1175,554],{"class":284},[141,1177,711],{"class":280},[141,1179,339],{"class":147},[141,1181,1182,1184,1186,1189],{"class":143,"line":442},[141,1183,1076],{"class":284},[141,1185,705],{"class":147},[141,1187,1188],{"class":284},"green",[141,1190,339],{"class":147},[141,1192,1193,1195,1197,1199,1201],{"class":143,"line":462},[141,1194,1088],{"class":284},[141,1196,705],{"class":147},[141,1198,554],{"class":284},[141,1200,1095],{"class":280},[141,1202,339],{"class":147},[141,1204,1205],{"class":143,"line":485},[141,1206,1102],{"class":147},[141,1208,1209,1212],{"class":143,"line":506},[141,1210,1211],{"class":180},"    .triangle",[141,1213,482],{"class":147},[141,1215,1216,1218,1220,1223],{"class":143,"line":527},[141,1217,1050],{"class":284},[141,1219,705],{"class":147},[141,1221,1222],{"class":284},"0",[141,1224,339],{"class":147},[141,1226,1227,1229,1231,1233],{"class":143,"line":539},[141,1228,1063],{"class":284},[141,1230,705],{"class":147},[141,1232,1222],{"class":284},[141,1234,339],{"class":147},[141,1236,1237,1240,1242,1244,1246,1248,1251],{"class":143,"line":559},[141,1238,1239],{"class":284},"        border-left",[141,1241,705],{"class":147},[141,1243,554],{"class":284},[141,1245,711],{"class":280},[141,1247,714],{"class":284},[141,1249,1250],{"class":284}," transparent",[141,1252,339],{"class":147},[141,1254,1255,1258,1260,1262,1264,1266,1268],{"class":143,"line":578},[141,1256,1257],{"class":284},"        border-right",[141,1259,705],{"class":147},[141,1261,554],{"class":284},[141,1263,711],{"class":280},[141,1265,714],{"class":284},[141,1267,1250],{"class":284},[141,1269,339],{"class":147},[141,1271,1272,1275,1277,1279,1281,1283,1286],{"class":143,"line":596},[141,1273,1274],{"class":284},"        border-bottom",[141,1276,705],{"class":147},[141,1278,569],{"class":284},[141,1280,711],{"class":280},[141,1282,714],{"class":284},[141,1284,1285],{"class":284}," red",[141,1287,339],{"class":147},[141,1289,1290],{"class":143,"line":606},[141,1291,1102],{"class":147},[141,1293,1294,1297],{"class":143,"line":612},[141,1295,1296],{"class":180},"    .polygon",[141,1298,482],{"class":147},[141,1300,1301,1303,1305,1307,1309],{"class":143,"line":622},[141,1302,1050],{"class":284},[141,1304,705],{"class":147},[141,1306,569],{"class":284},[141,1308,711],{"class":280},[141,1310,339],{"class":147},[141,1312,1313,1315,1317,1319,1321],{"class":143,"line":950},[141,1314,1063],{"class":284},[141,1316,705],{"class":147},[141,1318,569],{"class":284},[141,1320,711],{"class":280},[141,1322,339],{"class":147},[141,1324,1325,1327,1329,1332],{"class":143,"line":960},[141,1326,1076],{"class":284},[141,1328,705],{"class":147},[141,1330,1331],{"class":284},"yellow",[141,1333,339],{"class":147},[141,1335,1336,1339,1341,1344,1346,1348,1350,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1374,1376,1378,1381,1383,1386,1388,1390,1392,1394,1396,1398],{"class":143,"line":971},[141,1337,1338],{"class":284},"        clip-path",[141,1340,705],{"class":147},[141,1342,1343],{"class":284},"polygon",[141,1345,297],{"class":147},[141,1347,1222],{"class":284},[141,1349,1095],{"class":280},[141,1351,1352],{"class":284}," 0",[141,1354,1095],{"class":280},[141,1356,356],{"class":147},[141,1358,554],{"class":284},[141,1360,1095],{"class":280},[141,1362,1352],{"class":284},[141,1364,1095],{"class":280},[141,1366,356],{"class":147},[141,1368,554],{"class":284},[141,1370,1095],{"class":280},[141,1372,1373],{"class":284}," 80",[141,1375,1095],{"class":280},[141,1377,356],{"class":147},[141,1379,1380],{"class":284},"80",[141,1382,1095],{"class":280},[141,1384,1385],{"class":284}," 100",[141,1387,1095],{"class":280},[141,1389,356],{"class":147},[141,1391,1222],{"class":284},[141,1393,1095],{"class":280},[141,1395,1385],{"class":284},[141,1397,1095],{"class":280},[141,1399,302],{"class":147},[141,1401,1402],{"class":143,"line":982},[141,1403,1102],{"class":147},[141,1405,1406,1408,1410],{"class":143,"line":992},[141,1407,625],{"class":147},[141,1409,688],{"class":151},[141,1411,155],{"class":147},[141,1413,1414],{"class":143,"line":997},[141,1415,439],{"emptyLinePlaceholder":438},[141,1417,1418,1420,1422],{"class":143,"line":1006},[141,1419,148],{"class":147},[141,1421,152],{"class":151},[141,1423,155],{"class":147},[141,1425,1427,1429,1431,1434,1436],{"class":143,"line":1426},35,[141,1428,161],{"class":147},[141,1430,10],{"class":151},[141,1432,1433],{"class":147},">CSS\u003C\u002F",[141,1435,10],{"class":151},[141,1437,155],{"class":147},[141,1439,1441],{"class":143,"line":1440},36,[141,1442,1443],{"class":769},"    \u003C!-- 圆形 -->\n",[141,1445,1447,1449,1452,1455,1457,1460,1462,1464],{"class":143,"line":1446},37,[141,1448,161],{"class":147},[141,1450,1451],{"class":151},"div",[141,1453,1454],{"class":180}," class",[141,1456,184],{"class":147},[141,1458,1459],{"class":187},"\"circle\"",[141,1461,206],{"class":147},[141,1463,1451],{"class":151},[141,1465,155],{"class":147},[141,1467,1469],{"class":143,"line":1468},38,[141,1470,1471],{"class":769},"    \u003C!-- 矩形 -->\n",[141,1473,1475,1477,1479,1481,1483,1486,1488,1490],{"class":143,"line":1474},39,[141,1476,161],{"class":147},[141,1478,1451],{"class":151},[141,1480,1454],{"class":180},[141,1482,184],{"class":147},[141,1484,1485],{"class":187},"\"rect\"",[141,1487,206],{"class":147},[141,1489,1451],{"class":151},[141,1491,155],{"class":147},[141,1493,1495],{"class":143,"line":1494},40,[141,1496,1497],{"class":769},"    \u003C!-- 椭圆 -->\n",[141,1499,1501,1503,1505,1507,1509,1512,1514,1516],{"class":143,"line":1500},41,[141,1502,161],{"class":147},[141,1504,1451],{"class":151},[141,1506,1454],{"class":180},[141,1508,184],{"class":147},[141,1510,1511],{"class":187},"\"ellipse\"",[141,1513,206],{"class":147},[141,1515,1451],{"class":151},[141,1517,155],{"class":147},[141,1519,1521],{"class":143,"line":1520},42,[141,1522,1523],{"class":769},"    \u003C!-- 三角形 -->\n",[141,1525,1527,1529,1531,1533,1535,1538,1540,1542],{"class":143,"line":1526},43,[141,1528,161],{"class":147},[141,1530,1451],{"class":151},[141,1532,1454],{"class":180},[141,1534,184],{"class":147},[141,1536,1537],{"class":187},"\"triangle\"",[141,1539,206],{"class":147},[141,1541,1451],{"class":151},[141,1543,155],{"class":147},[141,1545,1547],{"class":143,"line":1546},44,[141,1548,1549],{"class":769},"    \u003C!-- 多边形 -->\n",[141,1551,1553,1555,1557,1559,1561,1564,1566,1568],{"class":143,"line":1552},45,[141,1554,161],{"class":147},[141,1556,1451],{"class":151},[141,1558,1454],{"class":180},[141,1560,184],{"class":147},[141,1562,1563],{"class":187},"\"polygon\"",[141,1565,206],{"class":147},[141,1567,1451],{"class":151},[141,1569,155],{"class":147},[141,1571,1573,1575,1577],{"class":143,"line":1572},46,[141,1574,625],{"class":147},[141,1576,152],{"class":151},[141,1578,155],{"class":147},[10,1580,1581],{"id":1581},"框架",[98,1583,1585],{"id":1584},"gojs","GoJS",[121,1587,1588,1591,1605],{},[124,1589,1590],{},"不开源",[124,1592,1593,1594,1597,1598,1601,1602,1604],{},"模型分离，双向绑定。",[93,1595,1596],{},"Model","描述数据模型，",[93,1599,1600],{},"Diagram","描述 UI 。",[56,1603],{},"数据\u002F视图的更新引入了事务性机制，可以原子化提交，按事务回滚\u002F撤销。",[124,1606,1607],{},"可以局部更新数据",[688,1609,1610],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":137,"searchDepth":173,"depth":173,"links":1612},[1613,1614,1615,1616],{"id":100,"depth":158,"text":51},{"id":632,"depth":158,"text":75},{"id":1015,"depth":158,"text":1016},{"id":1584,"depth":158,"text":1585},"visualization","2024-12-09","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。",false,"md",{},"\u002Fdocs\u002Fcanvas-vs-svg",{"title":5,"description":1619},null,"docs\u002Fcanvas-vs-svg",[100,632,1628,1629],"performance","best-practice","bgYzkOduyZyx2x_Pp9Vqo3cv9JmD5dtCG0oLRMqTjW0",[1632,1642,1651,1657,1659,1667,1676,1681,1689,1694,1701,1707,1713,1720,1726],{"path":1633,"title":1634,"description":1635,"date":1636,"category":1637,"tags":1638},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[136,1015,1639,1640,1629,1641],"javascript","es6","guide",{"path":1643,"title":1644,"description":1645,"date":1646,"category":1647,"tags":1648},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[1649,1650],"windows","cheatsheet",{"path":1652,"title":1653,"description":1654,"date":1655,"category":1647,"tags":1656},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[1639,1650],{"path":1623,"title":5,"description":1619,"date":1618,"category":1617,"tags":1658},[100,632,1628,1629],{"path":1660,"title":1661,"description":1662,"date":1663,"category":1647,"tags":1664},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。","2024-11-03",[1665,1015,1666],"font","notes",{"path":1668,"title":1669,"description":1670,"date":1663,"category":1671,"tags":1672},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[1673,1674,1675,1628,1666],"browser","http","network",{"path":1677,"title":1678,"description":1679,"date":1663,"category":1671,"tags":1680},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[1015,136,1629,1666],{"path":1682,"title":1683,"description":1684,"date":1663,"category":1671,"tags":1685},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[1686,1639,1687,1688,1666],"vue","webpack","vite",{"path":1690,"title":1691,"description":1692,"date":1663,"category":1671,"tags":1693},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[1639,1640,1666],{"path":1695,"title":1696,"description":1697,"date":1663,"category":1698,"tags":1699},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。","fundamentals",[1639,1700,1640,1666],"module-system",{"path":1702,"title":1703,"description":1704,"date":1663,"category":1698,"tags":1705},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[1706,1675,1639,1666],"websocket",{"path":1708,"title":1709,"description":1710,"date":1711,"category":1617,"tags":1712},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[1584,1639,1666],{"path":1714,"title":1715,"description":1716,"date":1717,"category":1617,"tags":1718},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[1719,1639,1650],"echarts",{"path":1721,"title":1722,"description":1723,"date":1724,"category":1698,"tags":1725},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[1674,1675,1650],{"path":1727,"title":1728,"description":1729,"date":1730,"category":1698,"tags":1731},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[136,1666,1650],1788337378592]