canvas绘制星空

发布时间：2020-03-25 07:15:04 作者：素颜猪
来源：网络阅读：270

效果图

canvas绘制星空

html结构

<!DOCTYPE html>

<html>

<head>

<title>canvas15</title>

</head>

<body>

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

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绘制星空

canvas绘制星空

相关阅读