★ FEATURED ARTICLE 图形学图像处理【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images.项目地址https://gitcode.com/gh_mirrors/skia1/skia点击查看免费下载本文介绍如何在 Skia 仓库中以**本地构建的 CanvasKitWASM 版 Skia**替代 CDN 版本在本地 Web 服务器上运行 demos.skia.org 目录下的全套 Web 演示项目。读完本文你将掌握从编译 CanvasKit 的 debug 构建、通过make local启动本地静态服务器、到修改页面脚本使其从本地/build/路径加载 WASM 资源的完整链路并可自行改造成属于自己的 CanvasKit 调试环境。一、整体思路为什么 Demo 需要本地 CanvasKitdemos.skia.org下的每个演示页面默认从 npm 上发布的canvaskit-wasm包CDN加载canvaskit.js与canvaskit.wasm。这样做的好处是开箱即用但代价是无法验证你对 Skia 源码的本地改动。因此仓库在 demos.skia.org/README.md 中给出了明确的三步走流程进入 modules/canvaskit 目录运行make debug或同类命令编译出本地的canvaskit.js/canvaskit.wasm回到demos.skia.org目录运行make local启动本地 Web 服务器修改各 Demo 的页面脚本让它们从本地服务器而非 CDN加载 CanvasKit参考 demos/hello_world 的写法。这套流程的产物是一个以http://localhost:8123为根的静态站点所有 Demo 都指向你刚编译出来的 WASM 构建适合做 CanvasKit 功能的本地调试与二次开发。二、第一步编译本地 CanvasKitmake debug2.1 前置条件编译 CanvasKit 依赖 Emscripten 工具链。根据 modules/canvaskit/README.md 的说明需要先通过仓库内的bin/activate-emsdk或tools/git-sync-deps后者也会顺带调用前者下载并激活 Emscripten SDK相关文件会放在third_party/externals/emsdk下GN 构建脚本默认使用该目录。若想指定自己的 Emscripten可通过skia_emsdk_dir参数覆盖参见gn/toolchain/wasm.gni。测试用例还要求 Node v14 或更高版本并可用npm ci安装测试依赖。2.2 执行构建cd modules/canvaskit make debugmake debug目标见 modules/canvaskit/Makefile的完整行为是debug: ./compile.sh debug_build - rm -rf build/ mkdir build cp ../../out/canvaskit_wasm_debug/canvaskit.js ./build/ cp ../../out/canvaskit_wasm_debug/canvaskit.wasm ./build/即调用 compile.sh 以debug_build模式编译然后把产物拷贝到modules/canvaskit/build/目录——这个目录正是后面本地服务器要暴露的路径。除debug外modules/canvaskit/Makefile 还提供一系列可选目标按需取用Make 目标对应 compile.sh 参数说明release默认发布构建out/canvaskit_wasm体积更小、优化更强debugdebug_build调试构建out/canvaskit_wasm_debug编译更快、报错信息更好release_cpu/debug_cpucpu_only/debug_build cpu_only仅 CPU 后端不启用 Ganesh GPU 后端release_webgpu/debug_webgpuuse_webgpu/debug_build use_webgpu启用 WebGPU Graphite 后端profileprofiling性能剖析构建release_viewer/debug_viewerviewer内置 Skia Viewer 相关代码gm_tests/gm_tests_debug见compile_gm.sh编译 GM 与单元测试用的 WASM 测试二进制2.3 通过 compile.sh 裁剪构建体积compile.sh支持用关键字参数做功能裁剪例如官方 README 中提到的./compile.sh no_skottie no_font可以去掉 Skottie 动画与全部字体代码体积约为默认 release 构建的一半。仓库中实现的功能开关还包括no_skp_serialization关闭 SKP 序列化约省 20KB压缩后no_effects_deserialization关闭特效反序列化约省 60KB压缩后no_pathops去掉 PathOps 路径布尔运算约省 2KBno_canvas/no_matrix去掉 HTML Canvas 绑定 / 矩阵辅助代码Canvas 绑定依赖矩阵辅助no_embedded_font去掉内置字体仅保留字体管理与排版能力no_woff2关闭 WOFF2 字体支持no_codecs/no_encode_jpeg/no_encode_webp/no_encode_png裁剪编解码能力primitive_shaper用简易 shaper 替代 HarfBuzz/ICU必须同时配合no_font或no_paragraph语义client_unicode使用客户端提供的 unicode 数据替代 ICU 内置数据enable_debugger为调试器应用构建legacy_draw_vertices启用旧版drawVertices混合模式语义force_tracing强制开启 tracingdebug 构建默认开启。这些开关最终都会映射为compile.sh里拼接给 GN 的skia_*参数如skia_canvaskit_enable_skottie、skia_canvaskit_enable_font、skia_use_webgpu等对裁剪体积、按后端定制有立竿见影的效果。三、第二步启动本地 Web 服务器make local编译完成后回到 demos.skia.org 目录执行make local对应的 Makefile 目标见 demos.skia.org/Makefile如下local: echo Go check out http://localhost:8123/demos/hello_world/index.html rm -f build ln -s ../modules/canvaskit/build build python3 -m http.server 8123这条命令做了三件事删除旧的build目录rm -f build避免残留符号链接或旧文件干扰创建符号链接build - ../modules/canvaskit/build让demos.skia.org/build/直接指向刚才编译产物的输出目录从而与各 Demo 页面中的/build/canvaskit.js路径对应用 Python 3 启动 HTTP 静态服务器监听8123端口以demos.skia.org目录为站点根。启动成功后浏览器访问http://localhost:8123/demos/hello_world/index.html即可看到第一个 Demo。注意这里对 Python 版本有硬性要求python3且服务器会以前台方式运行需要保持终端开启按CtrlC即可停止。四、第三步把 Demo 从 CDN 切换到本地构建4.1 参考样例 hello_worlddemos.skia.org/demos/hello_world/index.html 是官方指定的“如何加载本地构建”示例页面里同时保留了 CDN 与本地两条加载路径并配了注释作为开关!-- Comment the following line out and the subsequent line in to use a local build of CanvasKit -- script typetext/javascript srchttps://unpkg.com/canvaskit-wasm0.25.0/bin/full/canvaskit.js/script !-- script typetext/javascript src/build/canvaskit.js/script --以及配套的 JS 初始化代码// Comment the following line out and the subsequent line in to use a local build of CanvasKit const base https://unpkg.com/canvaskit-wasm0.25.0/bin/full/; // const base /build/; const ckLoaded CanvasKitInit({ locateFile: (file) base file });切换方式非常直白注释掉 CDN 的script行、启用/build/canvaskit.js行同时把locateFile的 base 从 CDN 换成/build/。locateFile是 Emscripten 初始化 API负责告诉 CanvasKit 到哪个目录去取.wasm文件因此两处必须同步修改否则会出现 JS 已加载而 WASM 404 的经典错误。4.2 页面主体与绘制逻辑修改加载路径后页面的绘制代码无需任何改动。hello_world 的核心绘制逻辑是const surface CanvasKit.MakeCanvasSurface(draw); if (!surface) { throw Could not make surface; } const paint new CanvasKit.Paint(); paint.setColor(CanvasKit.RED); const textPaint new CanvasKit.Paint(); const textFont new CanvasKit.Font(null, 20); function drawFrame(canvas) { canvas.drawRect(CanvasKit.LTRBRect(10, 10, 50, 50), paint); canvas.drawText(If you see this, CanvasKit loaded!!, 5, 100, textPaint, textFont); } surface.requestAnimationFrame(drawFrame);CanvasKit.MakeCanvasSurface(draw)会直接绑定页面中iddraw的canvas元素surface.requestAnimationFrame(drawFrame)则把drawFrame挂进浏览器的逐帧回调形成动画循环。加载本地构建成功后页面应显示一个红色矩形与 If you see this, CanvasKit loaded!! 文本——这同时也是验证本地 WASM 是否正常工作的自检手段。五、Demo 目录全景与典型特性demos.skia.org/demos 下共 12 个独立演示覆盖 CanvasKit 的主要能力域Demo 目录主题hello_world/最小可运行示例见上节image_decode_web_worker/在 Web Worker 中解码图片image_sampling/图片采样模式对比mesh2d/2D 网格/顶点渲染path_performance/路径渲染性能对比需 Chromium 系浏览器的 OffscreenCanvassampling_types/采样类型Filter Quality对比spreadsheet/类电子表格的 Canvas 绘制textedit/文本编辑相关绘制textures/纹理使用up_scaling/图片放大/缩放质量对比web_worker/CanvasKit 跑在 Web Worker OffscreenCanvas 中的示例webgpu/WebGPU 后端示例5.1 示例一Web Worker OffscreenCanvasdemos.skia.org/demos/web_worker/main.js 展示了把 CanvasKit 挪出主线程的典型写法主线程把offscreen-canvas通过transferControlToOffscreen()转交控制权再用worker.postMessage({ offscreenCanvas }, [offscreenCanvas])把OffscreenCanvas转移给 WorkerWorker 侧worker.js用importScripts()加载canvaskit.js收到画布后调用CanvasKit.MakeWebGLCanvasSurface(offscreenCanvas, null)建立表面再驱动一段 SkottieLottie动画。页面还放了一个“让主线程忙碌 1300ms”的按钮用于直观对比 Worker 与主线程渲染的卡顿差异。该 Demo 注明仅支持支持 OffscreenCanvas 的 Chromium 系浏览器。5.2 示例二WebGPU 后端demos.skia.org/demos/webgpu/index.html 先用if (gpu in navigator)探测 WebGPU 支持再通过navigator.gpu.requestAdapter()、adapter.requestDevice()拿到设备配置canvas.getContext(webgpu)上下文后直接以 WGSL 编写顶点/片元着色器绘制一个变色三角形。页面顶部保留了 Chrome Origin Trials 的meta标签含 skia.org 与 localhost:8123 两个 token这是早期 WebGPU 时代的兼容手段如今的主流 Chrome 已默认开启 WebGPU通常可直接运行。注意要真正跑起 CanvasKit 的 WebGPU 后端需要按第三节的debug_webgpu/release_webgpu目标重新编译。六、与源码构建系统的对应关系理解 Demo 与构建产物之间的对应关系能帮你快速定位问题make local创建的build符号链接指向modules/canvaskit/build/而该目录由各make目标debug、release、webgpu等负责填充——你最后一次运行的是哪个目标本地 Demo 用的就是哪个构建compile.sh中skia_enable_ganeshWebGL/GPU 后端、skia_use_webgpu/skia_enable_graphiteWebGPU 后端等 GN 参数决定了 WASM 二进制里到底包含哪个渲染后端。例如默认不带参数编译启用 WebGLGanesh带webgpu则改用 WebGPU Graphite 并关闭 Ganesh带cpu则两者都关、仅用 CPU 光栅化官方 CanvasKit 测试体系Karma Jasmine同样针对build/目录下的产物运行make test-continuous见 modules/canvaskit/karma.conf.js 与 modules/canvaskit/tests因此本地的 debug 构建既可用于 Demo 调试也可直接作为单元测试的被测对象。七、常见问题与排查建议页面 404 / 白屏优先确认demos.skia.org/build符号链接是否存在且指向modules/canvaskit/build再确认该目录下确有canvaskit.js与canvaskit.wasm两个文件make debug或make release会生成。JS 已加载但 WASM 请求失败检查页面中locateFile的 base 是否已同步改为/build/以及script标签是否已切到本地路径两处必须成对修改参照 hello_world 的注释开关。想用 WebGPU 后端需要重新执行make debug_webgpu或release_webgpu单纯切换页面加载路径不会改变 WASM 内部的渲染后端。体积过大、编译太慢用compile.sh的功能裁剪参数如no_skottie no_font按需瘦身make debug相比release编译更快、报错信息更友好适合日常迭代。端口冲突8123 被占用时可手动执行python3 -m http.server 其他端口并把页面中写死的本地 base 路径/build/保持为相对站点根的绝对路径即可无需改端口。通过以上三步流程编译 → 起服务 → 切换加载路径你便拥有了一个完全基于本地 Skia 源码的 CanvasKit 演示与调试环境可以随时验证自己的改动对渲染、性能与体积的真实影响。赞分享图形学图像处理【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images.项目地址https://gitcode.com/gh_mirrors/skia1/skia点击查看免费下载相关推荐Skia demos.skia.org 本地运行指南用本地 CanvasKit 构建调试 Web 2D 演示Skia demos.skia.org 本地运行指南用本地 CanvasKit 构建调试 Web 2D 演示 导读 本文围绕 Skia 仓库中 demos.s图形学convex-backend 从源码构建指南编译本地后端、运行 demo 应用与构建 NPM 包convex backend 从源码构建指南编译本地后端、运行 demo 应用与构建 NPM 包 本指南以仓库根目录下的 BUILD.md https://l数据库后端使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南使用 ADK A2UI v0.9 构建 Gemini Enterprise 演示 Agent从本地运行到 Cloud Run 部署全指南 本指南基于仓库中人工智能AI AgentAI 应用前端UI组件上一篇PP-OCRv6_medium_rec_onnx与PP-OCRv5对比性能提升83.2%的背后技术揭秘下一篇Termshark与系统监控工具集成全面掌握网络与系统状态创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
