<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas> <!-- 规定画布大小,不要写在style中。 -->
<script>
window.onload = function(){ //加载画布
var canvas = document.getElementById('canvas'); //获取画布
var context = canvas.getContext("2d"); //画布上下文环境
var skyStyle=context.createLinearGradient(0,0,0,canvas.height); // 创建渐变
skyStyle.addColorStop(0,"black");
skyStyle.addColorStop(1,"#035");
context.fillStyle=skyStyle; // 填充渐变
context.fillRect(0,0,canvas.width,canvas.height); //填充区域
for(var i = 0;i<200;i++){ //绘制星星的随机数变量设置
var r = Math.random()*5+5;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height*0.65; //0.65规定显示区域在百分之六十五区域内显示
var a = Math.random()*360; //旋转角度的随机值
drawStar(context , x, y, r , a); //传入绘制星星的函数
}
fillMoon(conte
canvas 实现一片星空
最新推荐文章于 2024-08-09 08:29:57 发布
本文将详细介绍如何利用HTML5的canvas元素,通过JavaScript编程实现一个动态的、充满星辰的星空效果。内容涵盖canvas基本操作,星星的随机生成,以及动画效果的实现技巧。
摘要由CSDN通过智能技术生成