为什么HTML5 Canvas rect / fillRect具有来自画布原点的图案渲染？
Hayko Koryun
当我发现这种奇怪之处时，我最近正在画布上玩一些代码。
给出以下代码
var pattern = ctx.createPattern(image, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(10, 10, 500, 500);
您可能希望它将
以点开始在画布上渲染带有此图像的图案x:10, y:10。
但是，实际上似乎发生的是，它渲染的矩形起始于，x:10, y:10但图案的起始于x:0, y:0。
解决方法是翻译画布
ctx.translate(10,10);
然后从开始渲染矩形 x:0, y:0
ctx.fillRect(0, 0, 500, 500);
我在jsfiddle上建立了一个演示来说明问题。只需更改x和y偏移量即可查看默认情况，然后使用复选框启用转换以“解决”该问题。
所以我的问题是这样的：
为什么在大多数情况下考虑模式的直观性时，模式填充的行为rect和fillRect这种方式？
用户名
模式（CanvasPattern）是单独的全局对象（就画布的上下文而言），未绑定到将其用作样式的方法。
由于模式并不“意识到”是否正在使用该模式，并且，如果仅将其用于样式，而样式又没有绑定到使用该模式的方法，则坐标系将成为唯一可以这样说的锚点到哪里画和瓷砖的图案。
做一个，例如，矩形（X，Y，W，H）将只告知浏览器在那里要呈现的矩形本身，而不是如何来填补它这是什么风格的模式保存有关信息，并且是在执行什么使用当前样式（可以是纯色，图案或渐变-后者与图案具有相似的行为）合成/填充形状时的下一步。
另一个方面是可以累积路径。例如，如果您这样做：
ctx.fillStyle = myPattern;
ctx.rect(x1, y1, w, h);
ctx.rect(x2, y2, w, h);
ctx.fill();
两个rect中的哪个应该是填充操作的锚点？（fillRect只是rect + fill的简写，但使用的临时路径不影响当前的全局路径）。
rect（），arc（）等仅创建路径，并且当您调用填充/描边时，这些路径将以设置的任何填充/描边样式栅格化到画布。
当调用填充/描边时，浏览器（或操作系统的图形子系统）可能会执行以下操作：
- 使用转换矩阵为点（比例，方向和位置）栅格化形状/路径，并创建内部蒙版/遮罩
- 使用该遮罩/遮罩以当前样式合成（填充）该遮罩
- ..其他步骤
现在只有一个遮罩/遮罩，您再也没有定义的锚点了，唯一剩下的就是坐标系。
（不考虑使用不同算法的可能性，即多边形填充，路径仍然存在等。但是性能和图形系统会影响这些决策以及规范，而该规范的目标是实现跨浏览器和跨平台的相同行为）。我在写这篇文章时睡着了，所以希望我不要让它变得更加模糊。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5 Canvas-fillRect（）与rect（）
- 2
为什么HTML5 canvas svg过滤器有损？
- 3
HTML5 Canvas：为什么没有画出我的圆圈？
- 4
HTML5 Canvas为什么fillText（）方法清除clearRect（）之后的所有内容
- 5
Knovajs / HTML5 Canvas - 旋转原点
- 6
HTML5 Canvas游戏渲染图
- 7
HTML5 Canvas：如何为fillRect设置边框？
- 8
HTML5 Canvas是否具有“笔下”方法？
- 9
缩放背景图案填充html5 canvas标签
- 10
缩放背景图案填充html5 canvas标签
- 11
在HTML5 canvas中，translate（）和moveTo（）JavaScript函数之间有什么区别？
- 12
为什么 Canvas 中的 Rect 在更改其 y 坐标时会上下移动？
- 13
HTML5 Canvas 设置画布位置值未解析
- 14
Pygame Rect，有什么争论？
- 15
为什么使HTML5标签具有语义？
- 16
HTML5 Canvas：如何枚举所有对象
- 17
HTML5 Canvas没有响应
- 18
带有jCanvas的HTML5 Canvas：如何删除图层
- 19
具有Rect.fromLTRB（）的Canvas.drawRect（）无法正常工作
- 20
为什么不能在HTML5 Canvas中绘制图像阵列？
- 21
在已经有图像的画布上添加水印-HTML5，Canvas
- 22
列表内的HTML5 Canvas，无法在所有画布上绘制图像
- 23
HTML5 Canvas-在所有画布大小上重复文本
- 24
使用React使用canvas html5的清晰方法而无需始终渲染所有canvas形状
- 25
HTML5 canvas javascript
- 26
HTML5 canvas javascript
- 27
具有视频源的HTML5 Canvas drawImage在Android上不起作用
- 28
如何使用动态图案和颜色设置Html5 Canvas FillStyle
- 29
HTML5 Canvas平稳地将x，y递增到原点（0,0）
我来说两句