Question

我正在使用mac和更新的chrome到18.0.1025.142。现在我有一个奇怪的问题。在大多数情况下（并不总是很奇怪）方法context.createPattern（）不起作用，而不是位图填充它充满黑色。

Answer 1

是的，这是一个问题：http://code.google.com/p/chromium/issues/detail?id=113592

我仍在为我的项目寻找临时解决方案。

Answer 2

这是Google Chrome和opera中的常见问题。在这种情况下，您应该创建一个包含所有画布脚本的函数，并在此函数中创建图像模式。然后你需要在window.onload事件或任何事件中调用函数，然后我认为图像creatPattern（）运行良好。只需按照示例并尝试理解......

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img src="img_lamp.jpg" id="lamp" width="32" height="32">
<p>Canvas:</p>



<canvas id="myCanvas" width="300" height="150" style="border:1px solid   #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

window.onload = draw;

function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height); 
var img = document.getElementById("lamp")
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
}

</script>

</body>
</html>

在这里使用你自己的jpg或png ...享受！。

画布，chrome 18中的createPattern bug

2 个答案: