<!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-12-05
問(wèn)題一大堆，首先backCanvas聲明一個(gè)就行了 聲明這么多干嘛，還有backCanvasContextt.strokeStyle="green"都輸入錯(cuò)了
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;
? ? ? ? ? ? }
2015-09-25
我也想問(wèn)這個(gè)問(wèn)題??！