【绘制】HTML5 Canvas 绘制 章末小节

我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门:https://github.com/827652549/CanvasStudy

章节回顾

本章深入讲解了如何在canvas中进行绘制。

  • 坐标系统和Canvas绘制模型

  • 绘制简单矩形、纯色、透明色,渐变色、填充图案、阴影效果

  • 路径和子路径、描边、填充、非零环绕规则并利用规则实现剪纸效果

  • 绘制1像素的线段、绘制比1像素还要细的线段技术、坐标轴、交互式绘制线段、虚线、线帽和线段连接处的属性、端点相交方式

  • 圆弧和圆形、圆角矩形、刻度表盘

  • 平方贝塞尔曲线、立方贝塞尔曲线、复选框箭头图案、多边形的绘制、拖放、可编辑的贝塞尔曲线

  • 坐标变换技术包括平移、旋转和缩放,自定义变换技术比如错切

  • 图像合成技术、剪辑区域并实现橡皮擦

我的总结

在这个绘制章节中,现在已经能将我们想要的大部分东西绘制在canvas中。从一张简单的白色Canvas画布,到几何图形、到图像、到阴影、圆角等等呈现在这个神奇的世界里,甚至能操作到“亚像素”的层面,我联想到我们用相机拍的照片,在屏幕上展示的时候也是通过像素点组合而成的。

有了这些天赋,canvas的未来能拓展长。

现在Canvas基本的绘制能够实现了,下面就能运用到图像、动画、精灵、物理学、碰撞检测、游戏开发,想想真让人激动,下面请继续跟我一起学习,到接下来的章节。

 

补充:

坚持一件事情或许是很难的,但是在不断地感受到大家到鼓励时,就会有不断地动力。CSDN上访问到增长,排名到上升、乃至Github上教程的 star++;都是令人激动的事情。说真的,中间也有想放弃和懈怠的时候,不是因为不爱了,而是因为身边越来越多的事情压的自己喘不过气。我看了一下我手机的一个健康记录,最近一个月平均每天睡眠5个半小时,回想这个月,大部分日子都是凌晨2点以后睡的,每天7点多起床,记得几天前的时候,眼睛会流泪,头痛到没办法学习。后来睡了一觉终于恢复正常。这段时间真的很辛苦,但是相对而言女朋友也很辛苦,异地本来就很难了,我这边又那么忙,这里感谢女朋友的陪伴和付出,非常感谢!我一定会一直对你好和珍惜你的,谢谢你宝贝!

发布了122 篇原创文章 · 获赞 25 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/HuoYiHengYuan/article/details/101480019