您的位置：首页 > 其它

canvas绘制星空

2017-01-18 10:33 218 查看

效果图

html结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas15</title>
<link rel="stylesheet" href="">
</head>
<body>
<canvas id="canvas" style ="border:1px solid #aaa;diplay:block;margin:50px auto;">
当前浏览器不支持canvas,请更换浏览器后再试
</canvas>
</body>
</html>
js脚本
<script> window.onload = function(){ var canvas = document.getElementById("canvas");
canvas.width = 800; canvas.height = 800;
var context = canvas.getContext("2d"); // context.lineJoin = "bevel"; // context.lineJoin = "round"; // context.lineJoin = "miter";
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,r/2.0,r,x,y,a,10,"#fb3","#fb3"); }
}
function drawStar(context,r,R,x,y,rot,lineWidth,strokeStyle,fillStyle){ context.beginPath();
for(var i = 0;i<5;i++){ context.lineTo(Math.cos((18+i*72 - rot)/180 * Math.PI) * R + x,-Math.sin((18+i*72 - rot)/180*Math.PI)*R + y); context.lineTo(Math.cos((54+i*72 - rot)/180 * Math.PI) * r + x,-Math.sin((54+i*72 - rot)/180*Math.PI)*r + y); }
context.closePath();
context.fillStyle = fillStyle; context.strokeStyle = strokeStyle; context.lineWidth = lineWidth; context.lineJoin = "miter"; context.fill();
context.stroke(); } </script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas 绘制星空

相关文章推荐

新的分享

章节导航