<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50 auto;">

? ? 瀏覽器不支持Canvas，請更換瀏覽器再試

? ? </canvas>

? ??

? ? <script>

window.onload = function () {

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 800;

var context = canvas.getContext("2d");

var backCanvas = createBackgroundCanvas();

var pattern = context.createPattern(backCanvas, "repeat");

context.fillStyle = pattern;

context.fillRect(0, 0, 800, 800);

}

function createBackgroundCanvas() {

var backCanvas = document.createElement("canvas");

backCanvas.width = 100;

backCanvas.height = 100;

var backCanvasContext = backCanvas.getContext("2d");

drawStar(backCanvasContext, 50, 50, 50, 0);

return backCanvas;

}

function drawStar(cxt, x, y, R, rot) {

cxt.save();

cxt.translate(x, y);

cxt.rotate(rot / 180 * Math.PI);

cxt.scale(R, R);

starPath(cxt);

cxt.fillStyle = "#fb3";

cxt.lineJoin = "round";

cxt.fill();

cxt.restore();

}

</script>