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

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

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

提问者：qq_你的肩膀我的远方_0 2016-03-22 11:33

个回答

  • Dandis
    2016-03-22 14:53:34
    已采纳

    cxt.closePath();
    context.lineWidth=3;
    context.strokeStyle='#fb5';
    context.fillStyle='#fb3';
    context.fill();

    还有这里的context应该是cxt

    1
  • qq_你的肩膀我的远方_0
    2016-03-22 15:36:41

    好了好了，谢谢

    0
  • qq_你的肩膀我的远方_0
    2016-03-22 13:48:35

    http://img.mukewang.com/56f0dca500010aaa08710369.jpg

    还是不行呀。。。。。。

    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