<!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>
问题一大堆,首先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;
}
我也想问这个问题!!