WindowJS入门指南：从零开始创建图形化应用
项目地址: https://gitcode.com/gh_mirrors/wi/windowjs 什么是WindowJS？
WindowJS是一个轻量级的JavaScript运行时环境，专门为创建图形化应用程序而设计。它提供了一个简单的窗口界面和Canvas API，让开发者能够快速构建2D图形应用、动画和交互式界面。与传统的Web浏览器环境不同，WindowJS直接运行在操作系统上，不需要浏览器支持。
安装WindowJS
获取WindowJS二进制文件
WindowJS提供了预编译的二进制文件，支持Windows和macOS平台。用户可以直接下载对应平台的版本使用。对于Linux用户或需要自定义功能的开发者，也可以从源代码进行编译安装。
第一个WindowJS程序
创建Hello World应用
让我们从一个简单的"Hello World"程序开始：
- 创建一个名为
hello.js的空文件 - 使用WindowJS运行这个文件
windowjs hello.js
这将打开一个空白窗口。接下来我们逐步添加功能。
设置窗口标题
修改hello.js文件，添加窗口标题设置：
window.title = "我的第一个WindowJS应用";
按F5键刷新窗口，可以看到标题已经更新。
绘制基本图形
WindowJS提供了Canvas API来绘制2D图形。让我们在窗口中绘制一个矩形：
const canvas = window.canvas;
// 设置背景色并填充整个画布
canvas.fillStyle = '#023047';
canvas.fillRect(0, 0, canvas.width, canvas.height);
// 绘制一个粉色矩形
canvas.fillStyle = '#eb005a';
canvas.fillRect(100, 100, 200, 200);
再次按F5刷新，你将看到一个蓝色背景上有一个粉色矩形的窗口。
添加交互功能
处理鼠标和键盘事件
WindowJS允许你监听各种用户输入事件：
// 鼠标点击事件
window.addEventListener('click', function(event) {
console.log(`点击位置: ${event.x}, ${event.y}`);
});
// 键盘按下事件
window.addEventListener('keydown', function(event) {
console.log(`按键: ${event.key}`);
});
按F1可以打开控制台查看输出日志，按F4可以在主窗口上叠加显示控制台内容。
修改鼠标光标
你还可以通过代码动态改变鼠标光标样式：
window.cursor = 'crosshair'; // 设置为十字准星
创建动画效果
使用requestAnimationFrame实现动画
WindowJS支持通过requestAnimationFrame实现平滑的动画效果：
function draw() {
// 清空画布
canvas.fillStyle = '#023047';
canvas.fillRect(0, 0, canvas.width, canvas.height);
// 绘制静态矩形
canvas.fillStyle = '#eb005a';
canvas.fillRect(100, 100, 200, 200);
// 绘制旋转的矩形
canvas.fillStyle = 'darkorange';
const y = canvas.height / 2;
const w = canvas.width;
const t = Math.cos(performance.now() / 300);
const x = w / 2 + (w / 4) * t;
canvas.save();
canvas.translate(x, y);
canvas.rotate(t * Math.PI / 2);
canvas.fillRect(-100, -100, 200, 200);
canvas.restore();
// 请求下一帧动画
requestAnimationFrame(draw);
}
// 启动动画
requestAnimationFrame(draw);
按F2可以显示帧率(FPS)计数器。默认情况下，WindowJS会等待垂直同步(vsync)，你可以通过设置window.vsync = false来禁用这一行为，实现尽可能高的帧率。
开发技巧
- 快速刷新：开发过程中，按F5可以快速重新加载脚本，无需重启应用
- 调试工具：
- F1：打开控制台窗口
- F4：在主窗口叠加显示控制台
- F2：显示帧率计数器
- 性能优化：对于动画应用，合理使用
requestAnimationFrame和window.vsync设置
总结
WindowJS为JavaScript开发者提供了一个简单直接的图形编程环境。通过本指南，你已经学会了如何：
- 安装和运行WindowJS
- 创建基本的图形界面
- 处理用户输入事件
- 实现动画效果
- 使用开发调试工具
WindowJS非常适合快速原型开发、教育用途或简单的图形应用创建。它的API设计简洁明了，学习曲线平缓，是进入图形编程世界的良好起点。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
