帆布标签在铬中产生黑色块 [英] canvas tag produces black block in chrome

问题描述

这是非常令人沮丧的。如果我不设置画布的高度和宽度，画布绘制很好，但是当我设置高度和宽度我回到一个黑盒子。我已经把我的代码下降到疯狂的程度，找不到任何问题。

This is very frustrating. If I don't set the height and width of the canvas, canvas draws just fine, but when I do set the height and width I get back a black box. I've stripped my code down to an insane degree and can't find any problem. The canvas tag works great in FF and IE9.

var canvas = document.getElementById('can1');
var ctx = canvas.getContext('2d');   

canvas.width    = 280;  
canvas.height   = 270;

ctx.clearRect(0, 0, canvas.width, canvas.height);

即使这样也会破坏google chrome中的canvas。无论我绘制多少，如果高度或宽度设置它失败。如果我用css设置高度或宽度，它会产生失真的结果。

Even just this destroys the canvas in google chrome. No matter how little I draw, if the height or width is set it fails. If I set the height or width with css instead, it produces a distorted result.

任何想法？

更新：我发现如果我的画布足够小，铬。但是我需要一个尺寸为280x270而不是100x100的画布。

UPDATE: I've discovered that if my canvas is small enough, it works in chrome. However I need a canvas that is 280x270 not 100x100

推荐答案

对于所有动画使用RequestAnimationFrame。只是在我的一个项目上工作！

Possible solution! For all animation use RequestAnimationFrame. Just worked on one of my projects!

这篇关于帆布标签在铬中产生黑色块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！