CANVAS 2D 上下文中的纹理答案

【问题标题】：Textures in CANVAS 2D ContextCANVAS 2D 上下文中的纹理
【发布时间】：2011-10-20 07:09:17
【问题描述】：

刚开始尝试填充画布，我正在尝试将纹理应用于对象（来自 blob 示例的 blob - http://www.blobsallad.se/）。此示例使用 2D 上下文，并且似乎没有实现 webGL。我能找到的所有关于纹理的信息都使用了 webGL，我想知道实现这一壮举有多容易。无论如何我可以在不重写代码的情况下将 webGL 的纹理功能合并到这个画布中吗？总而言之，我想这个问题是在询问 2D 上下文可用的方法是否也可用于 webGL 上下文......如果是这样，我想我可以更改上下文并应用我的纹理？如果我认为这一切都错了或在概念上感到困惑，请告诉我。

谢谢，布兰登

【问题讨论】：

我已经阅读了大约 10 次，但仍然不明白您想要做什么。 3D 上下文是否包含在 2D 上下文中，反之亦然？无论如何，两者没有任何共同点。
我只想在形状上添加纹理:)

标签： html canvas webgl

【解决方案1】：

在将图像用作 WebGL 画布的纹理之前，我曾尝试将图像绘制到 2d 画布上。它可以工作，但性能很糟糕（它确实因浏览器而异）。我目前正在考虑其他一些重构它的选项。除了将图像静态绘制到一个或两个 2d 画布上之外，我不会推荐它。

你可以在项目中的 lanyard/src/render/SurfaceTileRenderer.js 中看到一个疯狂的例子：http://github.com/fintler/lanyard

【讨论】：

【解决方案2】：

您是否希望将纹理应用到 2D 形状？

试试这样 http://jsfiddle.net/3U9pm/

【讨论】：