我正在尝试修改画布图案的起源,但无法达到我想要的效果.
我需要绘制一条填充点状图案的线条.虚线图案通过createPattern创建(为其动态创建canvas元素).
画布(基本上是一个红点)的创建方式如下:
function getPatternCanvas() {
var dotWidth = 20,
dotDistance = 5,
patternCanvas = document.createElement('canvas'),
patternCtx = patternCanvas.getContext('2d');
patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
// attempt #1:
// patternCtx.translate(10, 10);
patternCtx.fillStyle = 'red';
patternCtx.beginPath();
patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
patternCtx.closePath();
patternCtx.fill();
return patternCanvas;
}
然后使用该模式(画布)绘制一条线:
var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
var pattern = ctx.createPattern(getPatternCanvas(), 'repeat');
// attempt #2
// ctx.translate(10, 10);
ctx.strokeStyle = pattern;
ctx.lineWidth = 30;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
所以我们得到这个:
现在,我想用10px来抵消这些点的来源.翻译模式画布没有帮助,因为我们没有获得完整的点:
并且翻译画布本身的上下文并没有帮助,因为它抵消了线条,而不是图案本身:
翻译上下文似乎不会影响模式起源.
有没有办法修改模式本身的偏移量?