为什么出不来结果，控制台也没有报错呢？？？？？？？-慕课网

为什么出不来结果，控制台也没有报错呢？？？？？？？

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

qq_你的肩膀我的远方_0

2016-03-22 11:33

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>在canvas中填充图片，画布</title>
</head>
<style>
   .canvas{
       border:1px solid #000;
       display:block;
       margin:0 auto;
       /*width:100%;
       height: 500px;*/
   }
</style>
<body>
   <canvas id='canvas'>
       浏览器不支持canvas
   </canvas>
</body>
<script>
   var canvas=document.getElementById("canvas");
   canvas.width=800;
   canvas.height=800;
   var context = canvas.getContext('2d');
   window.onload=function(){
       //在canvas中填充图片
       // var backgroundImage=new Image();
       // backgroundImage.src='back.jpg';
       // backgroundImage.onload=function(){
       //    var pattern = context.createPattern(backgroundImage,'repeat');
       // context.fillStyle=pattern;
       // context.fillRect(0,0,800,800);
       // }

       // 在canvas中填充画布canvas
       var backCanvas=createBackgroundCanvas();
       var pattern=context.createPattern(backCanvas,'repeat');
       context.fillStyle=pattern;
       context.fillRect(0,0,800,800);
       // alert('2');
   }
   function createBackgroundCanvas(){
       var backCanvas = document.createElement('canvas');
       backCanvas.width=100;
       backCanvas.height=100;
       var backCanvasContext = backCanvas.getContext('2d');
       drowStar(backCanvasContext,150,300,400,400,20);
       return backCanvas;

   }
   function drowStar(cxt,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();
           context.lineWidth=3;
           context.strokeStyle='#fb5';
           context.fillStyle='#fb3';
           context.fill();
       }
</script>
</html>

写回答关注

4回答

Dandis

2016-03-22 14:53:34

已采纳

cxt.closePath();
context.lineWidth=3;
context.strokeStyle='#fb5';
context.fillStyle='#fb3';
context.fill();
还有这里的context应该是cxt

0 1
qq_你的肩膀我的远方_0

2016-03-22 15:36:41

好了好了，谢谢

0 0
qq_你的肩膀我的远方_0

2016-03-22 13:48:35

还是不行呀。。。。。。

0 0
笨鸟必须得先飞

2016-03-22 13:43:38

drowStar(backCanvasContext,150,300,400,400,20);
  function drowStar(cxt,r,R,x,y,rot)
你的星星的内圆是150，外圆300.。而你创造的画布背景大小是：
                                                                                        backCanvas.width=100;
                                                                                        backCanvas.height=100;

星星比画布大，那你应该出来是纯背景色的正方形块吧？
我就读了你的代码，没尝试。。。

0 0

Canvas绘图详解

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

72881 学习 · 422 问题

查看课程

相似问题

为什么出不来strokeText的内容呢？控制台也没有报错

回答 2

为什么我的五角星没有画出来，全黑了呢？

回答 3

为什么没有效果

回答 1

我的为什么效果没有星星呢==明明和老师的差不多，到底哪里出错鸟==

回答 3

我就纳闷了，没有stroke(），怎么绘制出来的？？

回答 2

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