Cursor最佳实践记录
前言 AI编程是最近最火的话题，自己也有所尝试使用cursor工具用于辅助日常开发，并且在其开发模式和协作流程进行了多次的迭代。文章主要是想记录一下，这些实践心得，欢迎大家一起交流。 首先需要明确，AI编程类工具目前并不能取代程序员具备独立编码的能力，也不是配置几个简单的MCP就可以完善其编程能力。我们应该从实际项目出发，分享一些AI编程思路和流程优化经验，真正能把AI用好，而不仅仅是简单碎片的代...
Canvas 11
canvas的优化 性能提升的技巧 在离屏的canvas上预渲染相似的图形或重复的对象。 如果存在相同的绘制操作在每个动画帧上，我们可以考虑将其分流到屏幕的画布上。 ` myCanvas.offscreenCanvas = document.createElement("canvas"); myCanvas.offscreenCanvas.width = myCanvas.width; myCan...
Canvas 10
像素操作 我们可以通过ImageData对像操纵像素数据，直接读取和写入像素数据。 ImageData对象 该对象存储着canvas对象真实的像素数据，包含下列这些只读属性： width —— 图像的宽度 像素为单位 height —— 图像的高度 像素为单位 data —— 一个Unit8ClampedArray类型的一维数组，按顺序包含每个像素的位置（RGBA） 范围是0-255 我们可以通...
Canvas 09
高级动画 我们将会更详细关注运动本身，我们将会添加一些物理特性使得我们的动画更加合理和高级。 绘制一个球 ` const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const ball = { x: 100, y: 100, radius: 25, color: ...
Canvas 08
我们要实现动画的效果，就需要把之前所有的东西进行重绘。 动画实现的基本步骤 清空canvas画布内容。（clearRect） 保存canvas状态。确保每一帧的渲染不受上一帧的影响。 绘制动画图形。 恢复canvas状态。 操控动画 因为我们的画面是在js执行完之后生成，所以我们需要的是在一个周期内执行相关绘制函数。 可以通过三种方法控制在设定的时间点上执行重绘函数。 setInterval() ...
Canvas 07
组合 Compositing 对于合成的图形来说，绘制顺序有限制，我们可以使用globalCompositeOperation属性来改变这种情况，同时clip属性允许我们隐藏我们不想看到的部分图形。 globalCompositeOperation = type 该属性1设定了在绘制新图形时采用的遮盖策略，可以表示12中遮盖方式的字符串。 裁切路径 用于隐藏画布上不需要的部分 裁切效果与globa...
1 / 4
下一页