相关疑难解决方法(0)

我在画布上使用了clip()函数.

结果:

正如你所看到的那样,镀铬版本沿着边缘有可怕的锯齿/锯齿.我该如何解决？

代码重现:

http://jsfiddle.net/ZRA76/:

<canvas id="test" width="300" height="300"></canvas>?

<script type="text/javascript">
    cv = document.getElementById("test");
    ctx = cv.getContext("2d");

    var im = new Image();
    im.onload = function () {
        ctx.beginPath();
        ctx.arc(110, 110, 100, 0, 2*Math.PI, true);
        ctx.clip();
        ctx.drawImage(im, 0, 0);
    }
    im.src = "http://placekitten.com/300/300";
</script>

作为一个学习项目，我尝试使用 HTML5 画布重新创建 Tiny Wings 中程序生成的山丘。我的目标是生成像这张图片中的山一样的纹理：

到目前为止，我已经生成了一个无缝重复纹理。它看起来有点像这样：

正如您所看到的，这只是其中的一部分，但是在《Tiny Wings》中，正弦曲线图案通常会旋转一定角度。我的问题是：是否可以采用无缝重复的图案，旋转它，然后将其剪裁为矩形，并且仍然具有无缝重复的图案？

我最初认为这是微不足道的，任何剪辑到其原始尺寸的旋转重复图案仍然会重复。然而，我的调查使我相信事实并非如此。

如果我所描述的不可能，我将如何使用我生成的图像的旋转版本作为形状的图案/填充？到目前为止，我能想到的唯一解决方案是使用画布剪辑区域。还有其他方法可以实现此目的吗？

相关问题：

• html5画布形状填充
• HTML5 Canvas - 用图像填充圆圈