星星出不来？-慕课网

星星出不来？

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

qq_慕数据1222313

2019-03-14 17:11

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

写回答关注

1回答

qq_慕数据1222313

2019-03-14 17:28:42

解决了

0 0

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题

为什么不出星星

回答 1

关于星星不重复

回答 2

改成这样就不出星星了为什么

回答 3

求助：为什么我优化代码后画出来的不是星星？

回答 2

星星闪效果

回答 4

打开慕课网App查看更多内容