javascript - createPattern 方法实现

标签 javascript jquery html canvas

我正在尝试绘制一个使用 fillStyle 模式的填充矩形。 下面的代码允许绘制一个矩形,但之后,所有后续操作都将放弃绘制。

这是控制填充的代码:

var img = new Image();
img.src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR4Ag1va1Vm9Tynun8vY89CS1pY1eNMWGMxrc5efOIzEcQ-4IFa'
var pat = context.createPattern(img, 'repeat');
context.fillStyle = pat;

我怀疑我缺少有关 createPattern 方法的某些内容。 除了我正在尝试完成的不使用 createPattern 的替代方案吗? 我注意到一些例子使用了 onload(); img.src 的值在我的实际环境中发生了变化,所以我不确定这是否相关。

fiddle :http://jsfiddle.net/Dvtz3/10/

好的,所以事实证明,一旦我实时运行而不是本地运行,chrome 安全错误就得到了修复,但它不是用模式填充矩形,而是将其填充为实心。填充图案在 FF 中运行良好

https://dl.dropbox.com/u/97446129/2-28/joined%2011-1/filltest.html

最佳答案

查看错误控制台,我发现它充满了SecurityError。这是因为当您在 Canvas 上绘图时,您正在用跨源图像污染它。出于安全原因,这将不允许您调用 getImageData,因此会出现“古怪”的结果。

关于javascript - createPattern 方法实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15169306/

相关文章:

javascript - 找到没有样式显示的 div,并在每个第二个 div 上插入一个分页样式

php - 使用MySQL和PHP生成HTML网页时出错

html - 如何将文本移动到正确的位置?

javascript - 如果可滚动的 div 比窗口高,则将水平滚动条附加到窗口底部

javascript - Material ui 选项卡不可点击

javascript - vscode 不警告未解析的函数或方法

php - 如何在一个选项卡或窗口中更新最新的 ID,同时在不同的选项卡或窗口中插入记录?

php - 自动保存表单字段

javascript - 通过 HTML5 Canvas Context 缩放并在给定图像上绘制网格

javascript - 如何使用正则表达式将字符串中的 "/"替换为 "-"