不能实现在canvas中插入canvas-慕课网

不能实现在canvas中插入canvas

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

撞门人

2015-08-01 17:22

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

写回答关注

2回答

语默_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;
}

0 0
CoolYvonne

2015-09-25 14:03:43

我也想问这个问题！！

0 0

Canvas绘图详解

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

72881 学习 · 422 问题

查看课程

相似问题

关于在canvas中插入的canvas的位置问题

回答 3

canvas

回答 1

老师，canvas里面怎么插入文本输入框

回答 1

canvas能使用JQuery吗？

回答 1

canvas实时显示文字

回答 2

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