相关疑难解决方法(0)

我在使用可移动画布时遇到问题，该画布会随着“玩家”在地图上移动而进行调整。由于绘制 600 个瓷砖，每秒 60 次非常低效，我切换到使用translate3d并且只有draw在玩家越过一个完整的瓷砖时 - 但它一直出现故障并且不能平滑地移动。我将如何正确实现这一目标？

const ctx = canvas.getContext('2d');
canvas.height = 200;
canvas.width = 600;
const tileSize = canvas.height/6;
const MAIN = {position:{x: 120, y: 120}};
const canvasRefresh = {x: 0, y: 20};
document.body.onmousemove = e => MAIN.position = {x: e.clientX, y: e.clientY};
const tiles = {x: 20, y: 20}

function update(){
    moveMap();
    requestAnimationFrame(update);
}
function drawMap(){
    for(var i = 0; i < tiles.x; i++){
        for(var j = 0; j < tiles.y; j++){
            ctx.fillStyle …

我正试图在页面顶部绘制一个巨大的画布矩形(某种灯箱背景),代码非常简单:

var el = document.createElement('canvas');
el.style.position = 'absolute';
el.style.top  = 0;
el.style.left = 0;
el.style.zIndex = 1000;
el.width  = window.innerWidth + window.scrollMaxX;
el.height = window.innerHeight + window.scrollMaxY;

...
document.body.appendChild(el);

// and later

var ctx = el.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.fillRect(0, 0, el.width, el.height);

有时(并非总是)最后一行抛出:

组件返回失败代码:0x80004005(NS_ERROR_FAILURE)[nsIDOMCanvasRenderingContext2D.fillRect]

我一直猜测是因为图像大小还是因为画布下面的内容类型(例如嵌入式视频播放)而发生这种情况,但显然不是.

所以我正在寻找有关如何隔离和/或解决此问题的任何想法.

即使在我们的 MacBook 上我也无法重现问题本身，但我们有一些用户的日志。问题是当我尝试在 CanvasRenderingContext2D 上使用某些渲染方法时，它会崩溃，因为它为空。

所以我有 canvas 元素，有 getContext 方法，但它返回 null。检查潜力的简短列表：

1. canvas 元素已创建、存在、具有正大小并具有 getContext 方法
2. 页面加载后执行 getContext 调用（onload 侦听器）
3. 没有其他带有其他参数的 getContext 调用（例如“webGl”）
4. 在 getContext('2d') 中 '2d' 字符串始终为小写
5. 此问题仅在 Safari 10 上重现
6. 在某些情况下，此错误不是在页面加载之后发生，而是在某些用户操作之后发生。这意味着画布被破坏并重新创建了几次，并且它起作用了。

我正在编写一个数据可视化应用程序，它需要我处理非常大的二维数据数组，并将该数据转换为缩小的图像，以便在 DOM 的画布中显示。

我遇到了 DOM 画布大小限制。我的数组可以大到 5000 x 5000。我想通过createImageBitmap()同时缩小和将大数组转换为ImageBitMap较小尺寸（256 x 256）来绕过画布大小限制，以便插入到屏幕画布中。

如何将原始数组数据转换为正确的格式？这种方法行得通吗？