<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>
终于找开了,starPath(cxt);未定义