本文介绍了JavaScript中canvas的基本用法，包括绘制文本、圆形图像和视频，以及如何制作刮刮卡。通过利用globalCompositeOperation属性实现不同图像的叠加效果，创建了刮刮卡功能。此外，还提到了画板练习，强调了前端工程师通过实践和学习资料提升技能的重要性。
pencil.strokeStyle = “salmon”;
pencil.stroke()
绘制线条
二、绘制文本
绘制文本
cvs.font = “30px 微软雅黑”;
三、绘制圆图像、视频
效果图
四、时钟
save用于保存当前的画布状态，restore将画布状态重置到save保存时的样子。画布状态分为画布的坐标(transform)，画布绘制区域(clip)，画布中设置的组合方式(globalCompositeOperatio)。当我们在使用transform,clip和globalCompositeOperatio时会改变画布的状态，而这种改变会影响到接下来的画布绘制操作，所以在进行这种操作前需要使用save来对画布进行一次保存，在进行改变状态后的下一步操作中使用restore来重置画布状态。
效果图
五、刮刮卡制作
预备知
最低0.47元/天 解锁文章
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
