目录
Canvas 元素的默认尺寸是多少?如何正确设置其宽高以避免图像拉伸?
如何获取 Canvas 的 2D 上下文对象?3D 上下文支持哪些技术?
canvas.width 与 canvas.style.width 的区别是什么?
Canvas 支持的图像格式有哪些?如何将 Canvas 转换为 Base64 图片?
Canvas 中如何处理跨域图片资源?
设置图片的crossOrigin属性
使用代理服务器
如何检测浏览器是否支持 Canvas?
解释 globalAlpha 属性对全局透明度的影响。
save () 和 restore () 在 Canvas 状态管理中的作用。
Canvas 的坐标系原点位置及坐标计算规则。
Canvas 的渲染性能优化有哪些常见手段?
减少重绘区域
批量绘制
缓存绘制结果
优化图片资源
避免复杂的变换和滤镜
如何清除 Canvas 画布的全部或部分内容?
Canvas 的坐标系原点位置及坐标计算规则。
如何绘制一个带圆角的矩形?
使用 arc () 绘制完整圆形的参数配置。
如何通过贝塞尔曲线(bezierCurveTo)绘制复杂形状?
实现线性渐变(createLinearGradient)并应用到图形填充
createPattern 方法如何实现图像平铺效果
使用 drawImage () 绘制图像时,如何控制缩放与裁剪
基本绘制
缩放绘制
裁剪并缩放绘制
如何为图形添加阴影效果
解释 transform () 与 setTransform () 的区别
transform () 方法
setTransform () 方法
如何通过 rotate () 和 translate () 实现围绕某点旋转?
使用 clip () 实现路径裁剪的原理
如何通过 getImageData 和 putImageData 操作像素数据?
实现文本垂直居中的方法(textBaseline 与 textAlign)
使用路径绘制多边形的通用步骤
lineJoin 和 lineCap 属性对线条端点的影响
如何通过矩阵变换实现图形的复杂形变?
requestAnimationFrame 相比 setTimeout 的优势有哪些?
实现匀速直线运动的方块动画
缓动函数(Easing Function)在动画中的作用及实现原理
如何通过 clearRect () 避免动画残影?
大规模粒子系统的性能优化策略
Canvas 动画中如何避免内存泄漏?
及时清除定时器和动画帧
释放不再使用的对象
避免循环引用
优化事件监听器
双缓冲技术(Offscreen Canvas)的实现原理
如何检测 Canvas 渲染的帧率(FPS)?
Web Worker 在 Canvas 计算密集型任务中的应用场景
大规模粒子系统模拟
复杂的图形渲染
像素级图像处理
使用 willReadFrequently 优化高频像素读取场景
实现图片滤镜(如灰度化、反色)的像素处理步骤
灰度化滤镜
反色滤镜
使用 globalCompositeOperation 实现图像叠加模式(如 source-in)
如何通过蒙版(Mask)实现人像抠图?
图片合成时如何处理透明通道?
使用 toDataURL 导出图片时的跨域限制及解决方案
如何实现 Canvas 截图并添加水印?
基于 ImageData 实现马赛克效果
图像缩放时抗锯齿(Anti - aliasing)的启用与禁用方法
启用抗锯齿
禁用抗锯齿
使用 WebGL 与 Canvas 2D 混合渲染的优势
如何将视频帧实时绘制到 Canvas 并处理?
如何创建一个 Canvas 元素并获取 2D 绘图上下文?
简述 Canvas 坐标系的原点位置及坐标轴方向
如何设置线条颜色和宽度?写出实现代码。
用代码示例说明 moveTo 和 lineTo 的区别
绘制矩形有哪些方法?分别解释它们的用途
如何清空 Canvas 画布?
简述 beginPath 和 closePath 的作用
如何设置填充颜色和描边颜色?
用代码实现绘制一个红色实心正方形
如何绘制带圆角的矩形
简述 strokeStyle 和 fillStyle 的区别
如何绘制虚线
用代码实现绘制一个蓝色边框的矩形
简述 Canvas 元素的默认尺寸及修改方法
如何处理高清屏(Retina)下的 Canvas 模糊问题?
如何提升 Canvas 动画的性能?
简述批量绘制和缓存的应用场景
如何避免重绘和回流?