JavaScript中的画星星效果

于 2022-07-22 20:20:05 发布
阅读量382 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaoAGiao16/article/details/125939367
版权

1.首先在电脑桌面上打开Visual Studio Code

2.打开后创建一个新的画布

3.然后在敲出代码效果

（源代码）

4.效果图

XiaoAGiao16
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
画星星js
Sunflower_knight的博客
05-26 607
代码 JavaScript部分 这次的代码直接从js开始，首先我们先写一个for循环，然后在for循环里面嵌套一个for循环在第二个for循环里面输出一个星星，然后在第一个for循环中输出一个换行，实现随着行数的增加每一行都会比上一行多一个五角星 <script> //三角形的---五角星----随着行数的增加,每一行都会比上一行多一个五角星 // 提示:document.write("★");换行: document.write("<br...
使用Javascript + html + css实现点击页面出现小星星的动画效果
04-05
使用Javascript + html + css实现点击页面出现小星星的动画效果，资源内包含完整代码
JS画5角星方法
maque0312的技术博客
09-17 1201
function create5StarClip(context) {       var n = 0;       var dx = 100;       var dy = 0;       var s = 150;       context.beginPath();       context.translate(100,150);       var x = Math.si
H5+javascript 动态绘制五角星
LMX的博客
02-25 1521
原理 手动画五角星感觉谁都会。 这不是有手就行，简简单单。可是用代码画图应该怎样做呢？ 其实也很简单在H5画布上无非就是找点，然后按一定的顺序连接这些点。那么问题来了点怎么找啊？ 给你整副图，一看就明白了。 懂了吧，这不就是圆上的五个点么，找出来不就行了。圆的方程高中生都张口就来(x-a)²+(y-b)²=r²。不过这好像没啥用因为我们想要坐标点。在稍微那么仔细一看，这不是将整个圆平分了5份吗。每个1/5弧对应的圆心角，这不是2π/5么。有了圆心角用极坐标求位置那不很nice。圆的极坐标公式：ρ²=x²
html5-canvas绘图功能绘制五角星
candy755的博客
09-12 9766
我先简单的介绍下HTML5 新增的canvas标签， canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下图是基本绘制的步骤，需要注意的是:Internet Explorer 8 及更早 IE 版本的浏览器不支持 &lt;canvas&gt; 标记。 现在我将利用这...
使用Javascript + html + css实现页面随机出现小星星的动画效果
最新发布
04-05
使用Javascript + html + css实现页面随机出现小星星的动画效果，资源内包含完整代码
sparklejqueryjs基于SVG的jQuery星星闪耀特效插件
08-10
sparkle.jquery.js是一款可以制作炫酷的星星闪耀效果的jQuery插件。该插件基于SVG来制作星星闪耀效果，你可以控制星星的颜色，边框色，大小，延迟时间等属性。
jquerystars是一款可以制作鼠标跟随星星特效的jQuery插件
08-10
jquery-stars是一款可以制作鼠标跟随星星特效的jQuery插件。你可以自定义跟随鼠标移动的星星的数量，颜色，范围等，也可以使用自定义的图片来代替星星。
vue实现星光闪烁动画相关文件
04-05
vue实现星光闪烁动画相关文件
js+canvas绘制五角星的方法
11-22
本文实例讲述了js+canvas绘制五角星的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>canvas绘制五角星 </title> [removed]
VC++中五角星的绘制
09-13
VC中绘制五角星的简单算法及坐标系的映射。
js实现漫天星星效果
10-20
主要为大家详细介绍了js点击出漫天的小星星，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用JS画星星
diaoyin8112的博客
03-10 508
例子1 for (var i=1;i<=5;i++) { for (var j=1;j<=i;j++) { document.write("☆"); } document.write("<br/>"); }结果： 例子2 for (var i=1;i<=5;i...
javascript实现五角星效果
weixin_30580341的博客
06-24 460
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JQuery Adventures</title> <style> *{ pa...
HTML5-画一个简单五角星
紫晶花园-计算机技术分园
03-30 6008
HTML5-画一个简单五角星 Your browser does not support the canvas element.
js使用canvas画五角星以及渐变色，瞎画
GongWei_的博客
12-01 563
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星云图</title> </head> <body> <canvas id="canvas" style="border: 1px solid black; margin: 20px auto;"></canvas> </body> &.
js简单的五角星评分
随风的博客
06-01 2376
window.onload=function(){             //首先要获取图片,相当于装到一个数组里面             var star = document.getElementsByTagName("img");             //读取数组的索引             for(var i =0;i                 star[i].s
使用画布和css画一个星星闪烁的背景图
06-01
好的，下面是一个使用画布和CSS实现星星闪烁的背景图的示例代码： HTML： ``` <canvas id="stars"></canvas> <div class="background"></div> ``` CSS： ``` body { margin: 0; padding: 0; overflow: hidden; } #stars { position: absolute; top: 0; left: 0; z-index: -1; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; } ``` JavaScript： ``` var canvas = document.getElementById('stars'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var stars = []; for (var i = 0; i < 100; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1.5 + 0.5, alpha: Math.random() * 0.5 + 0.5, direction: Math.random() < 0.5 ? -1 : 1 }); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < stars.length; i++) { var star = stars[i]; ctx.beginPath(); ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 255, 255,' + star.alpha + ')'; ctx.fill(); star.x += star.direction * 0.1; if (star.x < 0 || star.x > canvas.width) { star.direction = -star.direction; } } requestAnimationFrame(draw); } draw(); ``` 这个代码将创建一个画布和一个半透明的黑色背景，并在画布上绘制100个随机闪烁的星星。星星将根据随机方向以0.1的速度移动，当星星到达画布的边缘时将改变方向。通过动画循环绘制星星，使其闪烁。 请注意，此示例代码的效果可能因浏览器和设备而异，具体效果可能需要根据您的具体需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值