canvas笔记-画一片星空

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);for(let i = 0; i < 200; i++){let r = Math.random() * 10 + 10;let x = Math.random() * canvas.width;let y = Math.random() * canvas.height;let a = Math.random() * 360;drawStar(context, x, y, r, r / 2.0, a);}}function drawStar(cxt, x, y, outerR, innerR, rot){cxt.beginPath();for(let 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.fillStyle = "#fb3";cxt.strokeStyle = "#fd5";cxt.lineWidth = 3;cxt.lineJoin = "round";cxt.fill();cxt.stroke();}</script></body>
</html>

canvas笔记-画一片星空相关推荐

canvas笔记-画一个五角星（含算法）
算法如下: 上面的图是正三角形: 说下算法,关于上面那些x,y是怎么算出来的. 这里大圆的5个顶点,每个顶点占用的角度为360/5 = 72度,左边那个18度是通过90 - 72 = 18度. 大圆半 ...
canvas笔记-画三角形并计算其外心（含算法其他绘图框架类似）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas 画点_css+canvas 随便画一个星空
今天躺在床上刷抖音的时候,看见了一个马克笔随便画星空的视频,很有意思. 先看效果: 开始需求分析: 1.渐变色的背景 2.画一颗树和一些草 3.水面的倒影 4.随便画点星星 5.画一颗流星 1.渐变色 ...
使用JavaScript在Canvas上画出一片星空
随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...
用python画月亮和星空_用canvas画一轮明月，夜空与流星
今天是中秋节,于是突发奇想,欸不如用canvas来画一画月亮吧. 于是一副用canvas画出的星空就这样诞生了. 在这里我用了ES6语法,星星,月亮和流星都单独写成了一个module. 于是我把js一 ...
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTML结果只需 ...
使用canvas 代码画小猪佩奇
使用canvas 代码画小猪佩奇最近不是小猪佩奇很火嘛!!! 前几天在知乎看见了别人大佬用python写的小猪佩奇, 顿时想学 ,可是自己没学过python(自己就好爬爬图片,,,,几个 ...

canvas笔记-画一片星空

canvas笔记-画一片星空相关推荐

最新文章

热门文章