                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

為什么代碼一樣，效果完全不一樣呢？

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<script>
????????window.onload?=?function(){
????????????var?canvas?=?document.getElementById("canvas");

????????????canvas.width?=?1000;
????????????canvas.height?=?700;

????????????var?context?=?canvas.getContext("2d");

????????????context.fillStyle?=?"black";
????????????context.fillRect(0?,0?,canvas.width,canvas.height);

????????????for(var?i?=?0?;?i?<?200?;i++){
????????????????
????????????????var?r?=?Math.random()?*?10?+?10;
????????????????var?x?=?Math.random()?*?canvas.width;
????????????????var?y?=?Math.random()?*?canvas.height;
????????????????var?a?=?Math.random()?*?360;
????????????????drawStar(context,?x,?y,?r,?r/2.0,?a);
????????????}

????????????function?drawStar(cxt,?x,?y,?outerR,?innerR,?rot){
????????????????for?(var?i?=?0;?i?<?5;?i++){
????????????????????cxt.lineTo?(?Math.cos(?(18+i*72-rot)?/?180*Math.PI?)?*?outerR?+?x,
????????????????????????????????-Math.sin(?(18+i*72-rot)/?180*Math.PI)?*?outerR?+?y);
????????????????????cxt.lineTo(Math.cos(?(54+i*72-rot)?/?180*Math.PI)?*?innerR?+?x,
??????????????????????????????????-Math.sin(?(54+i*72-rot)?/?180*Math.PI)?*?innerR?+?y);
????????????????}

????????????????cxt.closePath();
????????????????cxt.lineWidth?=?3;
????????????????cxt.fillStyle?=?"#fb3";
????????????????cxt.strokeStyle?=?"#fd5";

????????????????cxt.fill();
????????????????cxt.stroke();
????????????}

????????}

????</script>
</head>
<body>
<canvas?id="canvas"?style="margin:?50px?auto?;display:?block;?border:1px?solid?black;"></canvas>
</body>
</html>