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

不能实现在canvas中插入canvas

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
    <canvas id="canvas" style="border:1px solid red;display:block;margin:50px auto;">
    </canvas>
    <script>
        window.onload=function(){
            var canvas=document.getElementById("canvas");
            canvas.width=800;
            canvas.height=800;
            var context=canvas.getContext("2d");
            var backCanvas=createBackgroundCanvas();
            var pattern=context.createPattern(backCanvas,"repeat");
            context.fillStyle=pattern;
            context.fillRect(0,0,800,800);
       }
            function createBackgroundCanvas(){
            var backCanvas=document.createElement("canvas");
            var backCanvas.width=100;
            var backCanvas.height=100;
            var backCanvasContext=backCanvas.getContext("2d");
            backCanvasContext.beginPath();
            backCanvasContext.moveTo(15,15);
            backCanvasContext.lineTo(50,50);
            backCanvasContext.lineWidth=10;
            backCanvasContextt.strokeStyle="green"
            backCanvasContext.stroke();
            return backCanvas;
            }
            
        
    </script>
</body>
</html>


提问者:撞门人 2015-08-01 17:22

个回答

  • 语默_0001
    2015-12-05 00:13:59

    问题一大堆,首先backCanvas声明一个就行了 声明这么多干嘛,还有backCanvasContextt.strokeStyle="green"都输入错了

    function createBackgroundCanvas(){

                var backCanvas=document.createElement("canvas");

                backCanvas.width=100;

                backCanvas.height=100;

                backCanvasContext=backCanvas.getContext("2d");

                backCanvasContext.beginPath();

                backCanvasContext.moveTo(15,15);

                backCanvasContext.lineTo(50,50);

                backCanvasContext.lineWidth=10;

                backCanvasContext.strokeStyle="green";

                backCanvasContext.stroke();

                return backCanvas;

                }


  • CoolYvonne
    2015-09-25 14:03:43

    我也想问这个问题!!