html5 向左偏移,html5 – 画布模式偏移

我正在尝试修改画布图案的起源,但无法达到我想要的效果.

我需要绘制一条填充点状图案的线条.虚线图案通过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来抵消这些点的来源.翻译模式画布没有帮助,因为我们没有获得完整的点：

并且翻译画布本身的上下文并没有帮助,因为它抵消了线条,而不是图案本身：

翻译上下文似乎不会影响模式起源.

有没有办法修改模式本身的偏移量？