캔버스 경로 위에 배경 이미지를 바둑판 식으로 배열하는 방법이 있습니까?

Question

예를 들어, 어떤 종류의 경로가있는 페이지에 캔버스가 있습니다. 이 방법으로 자바 스크립트에 의해 생성됩니다 :

var context = $('#some_canvas').getContext('2d'); 
context.beginPath(); 
context.lineWidth = 5; 
context.strokeStyle = '#000000'; 
context.moveTo(0, 0); 
context.lineTo(100, 100); 
context.stroke(); 

이 명령 뒤에 나타나는 경로를 타일링 된 배경 이미지로 만들 수있는 방법이 있습니까?

Answer 1

나는 당신이 createPattern() 방법을 찾고 생각 :

var pattern = new Image; 
pattern.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAIAAABbzbuTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZtJREFUeNqMUs+rAVEUvjNG2MhClOUsppSEjbWFpOwtMIv5B2ZhZqkkZKkpe+XPYKtsbSxsZIGaQpgi4r3Pu5p3eV45dW/nnPt959zzg5RKpU6n8/WxkHq9LghCs9n8lICjKAohpFwuf0LgcCzLSqfTo9FIVVVd10He7XbX6/V8Pu/3e47jcB+Px0AgkEqlCOXNZjNJkgB1/wg+6XA4ACXPomkasXM1Gg3yj4AZi8WAHgwGgu1dLpcvOKRKJBLZbDaTyYDgdDrvXjtDLpd7yT6dTv8WzdNnaPP53A6Mezgc+v3+N/+jvO12GwwGqQfFYJRQksnker1+MwfIZDLxeDwA+Xy+xWIBT6VSgYk+Hg4HlvAoerVaodNQ8vl8KBSCUqvVAG2326g4EolsNhuYGNQjQ6/XAwh9GI/HbDxZltn/o2OPDBgctaPRKIsQRZEqWJxisXg3aaRCoQBvv99nw59Op3A4DH+1Wu12u09FYwh4w/6wBGwUOhuPx6FfLpfb7fZbtGEYpmnyPM/+x+v1tlotl8sFHdtFnd8CDACAg6Y2weEZQQAAAABJRU5ErkJggg=="; 
pattern.onload = function() { 
    var context = $('#some_canvas').getContext('2d'); 
    context.beginPath(); 
    context.lineWidth = 16; 
    context.strokeStyle = context.createPattern(pattern, 'repeat'); 
    context.moveTo(0, 0); 
    context.lineTo(150, 150); 
    context.stroke(); 
};