html如何封装canvas标签？

Question

html里定义了一个标签canvas，在整合其它插件的时候出现了冲突，想把canvas标签再封装一层该怎么写

Answer 1

如果插件是一次性的，可以把自己的js放在它后面，等它加完特效再动态添加自己的canvas。

如果这样也逃不过它的毒手，再怎么封装也是没有用的，只能把自己的canvas放iframe了。

Answer 2

没看懂你的问题，请详细表达一下
我猜测是你用的某些第三方库会查找当前存在的canvas做处理，然后查找错了？

Answer 3

准备两个(或多个，反正你要几个就是几个) canvas 标签。
在插件就绪之前，重写 HTMLCanvasElement.prototype.getContent：

;(() => {
  const { prototype: p } = HTMLCanvasElement;
  const originFunc = p.getContent;
  const getCanvas = () => document.querySelectorAll('canvas');
  let canvasList = getCanvas();
  let index = 0;

  p.getContent = function(...args){
    if(!canvasList){
        canvasList = getCanvas();
    }
    return originFunc.apply(canvasList[index++], args);
  }
})();

在页面变动不大且没有干扰的情况下，可以让它们的绘图互不干扰。
但是副作用比较大：

• canvas和插件顺序要一一对应，不然就会搞反画布；
• 页面内所有使用 canvas 的代码都会受到牵连；
• 如果有插件调用了toBlob和toData，得到的数据都将是第一个canvas 的。

所以考虑下，从其他方面着手解决这个问题。

Answer 4

你试了定义任何canvas（任意的id和class）都会出错？还是特定的canvas（特定的id或class）。

如果是，则那个插件确实该好好调整下，影响也太大。