星星出不来？

源自：5-3 使用图片、画布或者video

星星出不来？

<!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>

提问者：qq_慕数据1222313 2019-03-14 17:11

星星出不来？

个回答