                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

星星出不來？

<!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旋轉(zhuǎn)角度
?? ??? ??? ??? ?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>