canvas入门笔记｜炫酷星空图星轨运动设计思路

2023-08-13 19:59| 来源: 网络整理| 查看: 265

最近在学习canvas,掌握了理论知识后，以星空图为例实践下。示例样式

1、画背景布

是HTML的一个标签，可以直接设置width和height

html:

Your browser does not support HTML5 Canvas.//添加文本，用于不支持canvas的浏览器复制代码

在js中，也可以直接通过document.createElement('canvas')创建元素，并通过appendChild('canvas')插入。

引用并且初始化背景布 js:

var canvas = document.getElementById('myCanvas');//引用canvas元素 var ctx= canvas.getContext('2d');//获取2D环境 canvas.width=window.innerWidth; canvas.height=window.innerHeight;//使canvas画布的大小为整个屏幕的大小复制代码 2、画星星

画星星我们需要另外的canvas元素，而且这个元素应该是动态创建的

var canvas2=document.createElement('canvas');//创建另外的canvas元素 var ctx2=canvas2.getContext('2d'); 复制代码绘制圆形

星星的绘制基础图形就是圆形，需要用到arc()

角度和弧度在css的旋转中，用到的是角度(deg)，而canvas中用到的是弧度(rad) rad = (π / 180) * deg //2π即为一周的弧度复制代码 deg = (rad * 180) / π 复制代码

在js中π即Math.PI

绘制圆和圆弧 arc(x, y, radius, startRad, endRad, [anticlockwise]); 复制代码

其中： (x,y)：绘制的圆/圆弧的圆心坐标； radius：半径 startRad：起始弧度； endRad：终止弧度； anticlockwise：绘制方向，true逆时针，false逆时针（默认）；

绘制圆形时，startRad=0，endRad=2π

ctx2.arc(50, 50, 50, 0, Math.PI * 2);//画一个圆（x,y,半径，起始弧度，结束弧度）复制代码渐变

示例中的星空是有渐变效果的，canvas中的渐变分为两种，线性渐变和径向渐变：

线性渐变 ctx.createLinearGradient(x1,y1,x2,y2);//(x1,y1)渐变起始点，(x2,y2)渐变终点复制代码

当x1=x2,y1≠y2垂直的线性渐变；当x1≠x2,y1=y2水平的线性渐变；当x1≠x2,y1≠y2角度的线性渐变；

径向渐变 ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);//起始圆：圆心(x1,y1) 半径r1；结束圆：圆心(x2,y2) 半径r2 复制代码添加渐变颜色 gradient.addColorStop(position,color) 复制代码

position：指定渐变中颜色所在的相对位置（0～1）； color：指定渐变中的颜色

填充渐变 ctx.fillStyle=gradient; 复制代码画一个渐变颜色的星星 var gradient=ctx2.createRadialGradient(50,50,0,50,50,50); gradient.addColorStop(0,'#fff'); gradient.addColorStop(0.1, 'hsl(217, 61%, 33%)'); gradient.addColorStop(0.25, 'hsl(217, 64%, 6%)'); gradient.addColorStop(1, 'transparent'); ctx2.fillStyle = gradient; ctx2.beginPath(); ctx2.arc(50, 50, 50, 0, Math.PI * 2);//画一个圆（x,y,半径，起始弧度，结束弧度） ctx2.fill(); 复制代码渲染到画布上 ctx.drawImage(canvas2, 200,200, 50, 50);//在canvas绘制canvas2（img,x,y,w,h）复制代码

此时你会得到一颗星星

很多颗星星将渲染放在循环中，位置由随机数生成，你会得到很多颗星星 var starNum=1000;//星星数量 function drawStar(){ for(let i=0;i max) { var hold = max; max = min; min = hold; }//min>max，互换 return Math.floor(Math.random() * (max - min + 1)) + min; } 复制代码为了使其是以一个同心圆散开，因此定位x/y是以屏幕w/h的一半+/-一个在0到最大圆半径之间的随机数的值。可以借助三角函数sin()/cos()，其周期是-1～1之间 var orbitRadius = random(maxOrbit(w, h));//[0,最大轨道半径]之间取随机数，这个随机数作为基础的随机变量 var orbitX = w / 2;//屏幕宽的一半 var orbitY = h / 2;//屏幕高的一半 function drawStar(){ for(let i=0;i

【本文地址】

公司简介

联系我们

canvas入门笔记｜ 炫酷星空图星轨运动设计思路

canvas入门笔记｜炫酷星空图星轨运动设计思路