星星出不来？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display: block;margin:50px auto;border: 1px solid #AAAAAA;"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
//1
// var backgroundImage = new Image();
// backgroundImage.src = "img/back.jpg";
// backgroundImage.onload = function(){
// var pat = context.createPattern(backgroundImage,"no-repeat");
// context.fillStyle = pat;
// context.fillRect(0,0,800,800);
// }
//2
var backCanvas = createCanvas();
var pat = context.createPattern(backCanvas,"repeat");
context.fillStyle = pat;
context.fillRect(0,0,800,800);
}
function createCanvas(){
var backCanvas = document.createElement("canvas");
backCanvasE.width = 100;
backCanvasE.height = 100;
var backCanvascxt = backCanvasE.getContext("2d");
drawStar(backCanvascxt,200,200,10,20,0);
return backCanvas;
}
function drawStar(cxt,x,y,R,r,rot){//r小圆半径 R大圆半径 x,y偏移量 rot旋转角度
cxt.beginPath();
for (var i = 0 ;i < 5 ;i ++) {
cxt.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
cxt.lineTo( Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
cxt.closePath();
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.lineWidth = 3;
cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
