在使用图像创建图案时使用“no-repeat”、“repeat-x”或“repeat-y”时出现奇怪的问题。 请考虑以下事项:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.rect(0, 0, canvas.width, canvas.height);
context.translate(50,50);
var pattern = context.createPattern(imageObj, 'no-repeat');
context.fillStyle = pattern;
context.fill();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
</script>
</body>
</html>
我正在转换形状内的图像图案(在本例中它是一个矩形，但它适用于任何形状)。在 Chrome 35.0.1916.114 m 上，它会导致图像“模糊”。有没有办法避免拖尾效应，或者我做错了什么。
Fiddle
屏幕截图:
最佳答案
context.translate 应用于在 Canvas 上绘制的起点。相反，您想填充矩形的特定部分。
imageObj.onload = function() {
var width = 600;
var height = 400;
var patOffsetX = 50;
var patOffsetY = 50;
context.rect(0, 0, width, height);
var pattern = context.createPattern(imageObj, 'repeat');
context.fillStyle = pattern;
context.fillRect(patOffsetX, patOffsetY, width - patOffsetX, height - patOffsetY);
context.stroke(); //added to help see the rect
};
我还更新了 Canvas 的大小以查看它是否正常工作。
<canvas id="myCanvas" width="800" height="400"></canvas>
关于javascript - 翻译时 HTML5 Canvas 涂抹图像图案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24145535/