Canvas绘图波动球实际效果的示例

2021-02-23 15:59 jianzhan

近期关心区块链层面的信息内容, 瞎转游, 不经意看到这个网站主页的实际效果. 1堆波动的球, 球在间距较近的情况下会有感应线联接, 电脑鼠标还可以和球造成感应线. 看了下是用canvas做的.

原实际效果 

完成实际效果

以前对svg有过许多触碰, canvas了解还可以保证很强劲的3D渲染实际效果, 可是1直沒有甚么应用情景给我上手的机遇. 因而这次准备自身试着上手下.

此外, 之因此对这个感兴趣爱好, 1个是喜爱视觉效果实际效果类的物品, 2是喜爱相近手机游戏模块那种仿真模拟物理学全球的觉得, 试想1下这些球会互相碰撞, 或互相之间有引力斥力, 或再加重力要素. 这个动漫还能够开很多脑洞.

github repo见这里.

Canvas

Canvas的画图命令很相近SVG里边的命令, 很简易.

画圆

ctx.beginPath();
ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);
ctx.fill();

beginPath刚开始1段相对路径, arc画1个圆, 随后fill填充色调.

画线

ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
ctx.stroke();

一样是beginPath刚开始1段相对路径, moveTo挪动画笔到起始点, lineTo绘图线到终点站, stroke描边.

Canvas全屏

要维持canvas1直全屏, 要是在window onload或onresize的情况下重设1下canvas的宽高便可.

var canvas = document.getElementById("canvas");
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
window.onload = window.onresize = resizeCanvas;

动漫

Basic animations带我上手.

基础流程

做动漫的4个流程:

  1. 消除canvas內容, 一般应用clearRect()
  2. 储存canvas情况
  3. 绘图內容
  4. 重设canvas情况

我做的这个较为简易, 只用到了1和3, 便是持续地清空canvas随后重绘.

window.onload = function () {
    resizeCanvas();
    window.requestAnimationFrame(draw);
};
function cleanCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function draw() {
    cleanCanvas();
    // draw stuffs.
    window.requestAnimationFrame(draw);
}

操纵涵数

3个能够用:

  1. window.setInterval() 假如彻底不必须客户互动, 只是持续重绘, 用这个就够了.
  2. window.setTimeout() 假如要想客户实际操作, 如电脑键盘电脑鼠标, 危害动漫, 能够用这个. (不懂, 并不是requestAnimationFrame更好么?)
  3. window.requestAnimationFrame() 告之访问器下一次重绘以前要做的事儿, 即你自身订制的绘图实际操作.

MDN里边的这个事例还挺酷的. CodePen. 能够动起来的, 下面只是1个截图.

数据信息构造

以前看过1点Game Engine Development, 有目的地做朝向目标的封裝. 这里边用到的是是非非常简易的.

最基本的是Vector意味着2维室内空间上的点/空间向量, 组员仅有x, y.

在此基本上, Circle意味着圆, 组员center: Vector意味着圆心, radius: number意味着半径, speed: Vector意味着速率.

随后封裝1些自用的组员涵数便可.

开发设计自然环境

TypeScript + Webpack + Webpack-dev-server 不繁杂, 参照下列內容便可:

  1. Webpack/Getting Started
  2. Webpack/Typescript
  3. Webpack/devServer
  4. webpack-dev-server

此外, 还试用了npx, 用来运作npm的可实行程序流程. 之前webpack甚么的全是全局性安裝的, 立即启用webpack xx便可. 假如当地安裝webpack的话, 就必须根据./node_modules/.bin/webpack来运作当地的webpack, 如今能够npx webpack xxx.

1个小坑

在devServer的config里边, 添加了hot: true想打开热升级, 結果网页页面里边提醒: [HMR] Hot Module Replacement is disabled.

发现是1个老坑, 必须启用的情况下再加指令行主要参数: webpack-dev-server --hot --inline

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。