diff --git a/pages.json b/pages.json
index 1ed8e3b378a1f6af00821112601f09f433a2dd07..e0f6ad831763e762697e6c661cb1d09549c8f14e 100644
--- a/pages.json
+++ b/pages.json
@@ -234,14 +234,6 @@
         "navigationBarTitleText": "redirectPage"
       }
     },
-    // #ifdef WEB
-    {
-      "path": "pages/component/canvas/canvas",
-      "style": {
-        "navigationBarTitleText": "canvas"
-      }
-    },
-    // #endif
     {
       "path": "pages/component/web-view/web-view",
       "style": {
@@ -1115,6 +1107,14 @@
         "navigationBarTitleText": "自定义TabBar"
       }
     },
+    // #ifdef WEB
+    {
+      "path": "pages/template/browser-canvas/browser-canvas",
+      "style": {
+        "navigationBarTitleText": "如何使用浏览器 canvas"
+      }
+    },
+    // #endif
     // #ifdef APP
     {
       "path": "pages/template/calendar/calendar",
diff --git a/pages/tabBar/component.uvue b/pages/tabBar/component.uvue
index f22fccc706a5e8b7aabf01718b84b0c8c1ff01fe..343d35eb88eb30e6fd336f14c14c1a8178a6eade 100644
--- a/pages/tabBar/component.uvue
+++ b/pages/tabBar/component.uvue
@@ -182,29 +182,25 @@
               }, */
             ] as Page[],
           },
-          /*
-            {
-              id: 'map',
-              name: '地图',
-              pages: [
-                {
-                  name: 'map',
-                  enable: false
-                }
-              ] as Page[]
-            },
-            */
-          // #ifdef WEB
-          {
-            id: 'canvas',
-            name: '画布',
-            pages: [
-              {
-                name: 'canvas'
-              }
-            ] as Page[]
-          },
-          // #endif
+          // {
+          //   id: 'map',
+          //   name: '地图',
+          //   pages: [
+          //     {
+          //       name: 'map',
+          //       enable: false
+          //     }
+          //   ] as Page[]
+          // },
+          // {
+          //   id: 'canvas',
+          //   name: '画布',
+          //   pages: [
+          //     {
+          //       name: 'canvas'
+          //     }
+          //   ] as Page[]
+          // },
           {
             id: 'web-view',
             name: '网页',
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 9226b7d8b83ad9e385ab60cba372190e67629599..c6f06dfcb0515e1b79d210960aa370cdb79b5006 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -185,6 +185,15 @@
             open: false,
             pages: [] as Page[],
           },
+          // #endif
+          // #ifdef WEB
+          {
+            id: 'browser-canvas',
+            url: 'browser-canvas',
+            name: '如何使用浏览器 canvas',
+            open: false,
+            pages: [] as Page[],
+          },
           // #endif
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',
diff --git a/pages/component/canvas/canvas.uvue b/pages/template/browser-canvas/browser-canvas.uvue
similarity index 96%
rename from pages/component/canvas/canvas.uvue
rename to pages/template/browser-canvas/browser-canvas.uvue
index a58b4b15bb36c7e94dc6e31819425a40e66526b9..d6acce982d1e9b2d6d0f9c3716f627565602d8d1 100644
--- a/pages/component/canvas/canvas.uvue
+++ b/pages/template/browser-canvas/browser-canvas.uvue
@@ -12,7 +12,7 @@
   export default {
     data() {
       return {
-        title: 'Canvas',
+        title: '浏览器 canvas',
         drawing: null as UniElement | null,
         canvasElement: null as HTMLCanvasElement | null,
         canvasContext: null as CanvasRenderingContext2D | null,