為什么出不來結(jié)果，控制臺也沒有報錯呢？？？？？？？
<!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>
2016-03-22
cxt.closePath();
context.lineWidth=3;
context.strokeStyle='#fb5';
context.fillStyle='#fb3';
context.fill();
還有這里的context應(yīng)該是cxt
2016-03-22
好了好了，謝謝
2016-03-22
還是不行呀。。。。。。
2016-03-22
?drowStar(backCanvasContext,150,300,400,400,20); ??
??function drowStar(cxt,r,R,x,y,rot)
你的星星的內(nèi)圓是150，外圓300.。而你創(chuàng)造的畫布背景大小是?：
????????????????????????????????????????????????????????????????????????????????????????backCanvas.width=100;
?? ??? ?????????????????????????????????????????????????????????????????????????????????backCanvas.height=100;
星星比畫布大，那你應(yīng)該出來是純背景色的正方形塊吧？?
我就讀了你的代碼，沒嘗試。。。