JavaScript Canvas createPattern
JavaScript Canvas createPattern
画布createPattern
有问题。我有两个盒子,按下一个键后都会移动箭头:
示例:http://jsfiddle.net/wA73R/1/
问题是createPattern填充的框背景也在移动。如何避免这种情况?有什么解决办法吗?大盒子只是一个例子(drawImage
对我来说不是一个好的解决方案,我需要一些可以重复背景图像的东西)。
感谢您的帮助
问题是createPattern填充的框背景也在移动。
实际上,你的问题是背景是而不是移动的——当你把矩形画到不同的位置时,它是静态的。
如何避免这种情况?
图案将始终绘制在坐标原点,其实际位置由当前变换定义。将来,您将能够使用setTransform
方法转换模式本身,但由于目前没有在任何地方实现,因此您将不得不更改全局转换矩阵。
在您的情况下,这意味着,您不需要在x
/y
绘制矩形,而是将整个上下文转换为x
/y
,并在0
/0
绘制矩形,然后:
ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();
(更新的演示)
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 为什么在许多浏览器中drawImage()的性能略好于createPattern()
- IE9的HTML5 Canvas getImageData()函数存在问题
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- 加速我的复杂函数绘图仪(canvas+javascript)
- Canvas赢得't更新
- 在keydown(JS,Jquery)上更改HTML5 Canvas元素
- HTML5 Canvas访问控制允许原始错误
- Jasny bootstrap Off Canvas菜单:如何在导航栏下强制菜单滑动
- 在fabric.js中以PNG格式下载Canvas,给出网络错误
- 如何使用Canvas制作3D动画
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- Javascript Canvas使用getImageData(x,y,1,1).data获取颜色
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- Canvas.toDataUrl(“image/png”)工作不正常
- Javascript和Canvas绘制中间有孔的圆
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- canvas没有从uri中绘制完整的图像
- JavaScript Canvas createPattern