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中遮盖方式的字符串。 裁切路径 用于隐藏画布上不需要的部分 裁切效果与gl...
Canvas 06
canvas画布状态的保存和恢复 save() —— 保存画布 (canvas) 的所有状态 restore() —— 恢复画布之前保存状态 保存的Canvas状态就是当前画布应用的所有样式和变形的一个快照。 我们可以想象canvas的状态保存在一个栈里面，调用save就会将栈状态保存到栈中。调用restore将保存的状态从栈弹出。 画布的变形（平移、缩放、旋转） 样式属性 strokeStyl...
1 / 3
下一页