有没有办法在画布路径上平铺背景图片？

Question

例如，我有一个页面上的某种路径的画布。它是通过JavaScript这样创建的：

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(); 
};