首页手记用HTML5的canvas画星星

用HTML5的canvas画星星

标签：

Html/CSS Html5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画星星</title>
</head>
<body>
<canvas id="canvas" height="600" width="600">对不起，您的浏览器不支持canvas，请换个浏览器再试</canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var cxt=canvas.getContext("2d");

        cxt.save();
        cxt.translate(300,300);
        cxt.beginPath();
        cxt.strokeStyle="orange";
        cxt.lineWidth="10";
        cxt.closePath();
        cxt.beginPath();
        for(var i=0;i<5;i++){
        cxt.lineTo(100*Math.cos((18+i*72)*Math.PI/180),-100*Math.sin((18+i*72)*Math.PI/180));
        cxt.lineTo(50*Math.cos((54+i*72)*Math.PI/180),-50*Math.sin((54+i*72)*Math.PI/180));
        }
        cxt.fillStyle="yellow";
        cxt.fill();
        cxt.closePath();
        cxt.stroke();
        cxt.restore();

    </script>
</body>
</html>

点击查看更多内容