最近项目需求中要写较多H5小游戏，游戏本身体量不是很复杂，主要是承载较多业务逻辑，所以决定用canvas来完成游戏部分。之前只是知道H5中有canvas这个东西，也知道它大概是画图的，但具体怎么用，还是一无所知的。在MDN在看了一些相关资料，一口气也看了HTML 5 Canvas 核心技术和HTML5 2D 游戏编程核心技术，对canvas H5 游戏编程有了大致的了解，发现canvas游戏编程其实挺有趣的。目前也在学习webgl相关知识，打算把前端可视化这一块也深入学习。现在先记录一些自己认为canvas比较重要的知识，回顾和再学习。后续在记录webgl相关知识。

主要知识点

本系列主要深入学习canvas 2d编程中相关比较重要和基础的知识，算是对HTML 5 Canvas 核心技术这本书的读后感，大致知识点如下：

  1. 基础知识，学习如何绘制线段，图形，图片，文本等。
  2. 动画知识，学习如何用canvas实现简单的动画以及相关影响因素
  3. 碰撞检测，学习如何检测两个物体在运动过程中是否发生碰撞
  4. 2D游戏开发，学习用canvas开发2D游戏
  5. canvas相关小知识点

在学习过程中，最好是自己能动手实现，我就专门建了一个canvas demo的项目，里面都是自己在学习canvas时动手写的一些例子，感兴趣的可以去看看。

项目仓库地址：https://github.com/snayan/can...

demo预览地址：https://blog.snayan.com/canva...

我会按照上面的主要知识点，分篇幅来学习和回顾canvas 相关的核心技术。主要如下：

  • canvas核心技术-如何绘制线段
  • canvas核心技术-如何绘制图形
  • canvas核心技术-如何图片和文本
  • canvas核心技术-如何实现简单动画
  • canvas核心技术-如何实现复杂动画
  • canvas核心技术-如何实现碰撞检测
  • canvas核心技术-如何实现一个简单的2D游戏引擎
  • canvas核心技术-宽高，渐变，绘制真正1px线段
  • canvas核心技术-向量，三角函数

本文转载于猿2048:Canvas 核心技术

Canvas 核心技术的更多相关文章

  1. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  2. HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版​

    HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...

  3. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  4. Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识

    基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...

  5. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8

    第6章 精灵 精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来 本章将会实现三种设计模式:策略模式(精灵与绘制器 ...

  6. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7

    性能 运行putImageData()比drawImage()慢,同等条件下优先考虑drawImage() 操作图像数据需要遍历大量数据,应该注意几点: 1)避免在循环体中直接访问对象属性,应当保存在 ...

  7. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf6

    操作图像的像素:getImageData() putImageData() ImageData对象 调用getImageData()方法实际是获取了一个指向ImageData对象的引用,返回的对象包含 ...

  8. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5

    文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...

  9. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4

    CanvasRenderingContext2D对象中用于平移.旋转坐标系的方法 镜像 scale(1,-1)绘制垂直镜像:scale(-1,1)绘制水平镜像 自定义的坐标变换 transform() ...

随机推荐

  1. lsof、tcpdump和wireshark

    lsof:https://www.jianshu.com/p/a3aa6b01b2e1 tcpdump:https://linux.cn/article-10191-1.html wireshark: ...

  2. ElasticSearch内部基于_version乐观锁控制机制

    1.悲观锁与乐观锁机制 为控制并发问题,我们通常采用锁机制.分为悲观锁和乐观锁两种机制. 悲观锁:很悲观,所有情况都上锁.此时只有一个线程可以操作数据.具体例子为数据库中的行级锁.表级锁.读锁.写锁等 ...

  3. PHP-MVC-三层架构模拟

    1.控制器定义 <?php class VideoController{ public function index(){ echo "这是视频控制器的index方法"; i ...

  4. 1. 企业级调度器LVS初识、工作模式详解

    想学习更多相关知识请看博主的个人博客 1. LVS官网 LVS 时全球最流程的四层负载均衡开源软件. LVS 官网:http://www.linuxvirtualserver.org/ 2.Linux ...

  5. np.vectorize()和crosstab()和pivotTab（）函数解释

    numpy.vectorize(pyfunc, otypes=None, doc=None, excluded=None, cache=False, signature=None) Parameter ...

  6. w10环境vs2017,vs2019配置Opengl快捷方法

    最近,计算机图形学老师向我们布置了任务,配置自己的opengl.百度之后我发现很多教程和方法尝试之后,我发现一种简单的方法来分享给大家. 首先我的软件配置是w10专业版系统+Visual Stdio ...

  7. ArcGIS下载安装

    鉴于各位在安装过程中碰到诸多问题,博主打算分享下安装过程 ,仅供参考 一.注意:两个版本安装之前都必须的步骤 安装license Manager10.2,下载完成后,打开安装点击SetUp.exe,如 ...

  8. Mybatis数据库分页

    使用limit分页(sql语句) SELECT * FROM user limit 0,2 #从第0个开始查,查2个 使用Mybatis实现分页,核心还是sql(map) <select id= ...

  9. 7月2日 Django 生成验证码、

    html页面里 {# 验证码 #} <div class="form-group " id="v-code-wrapper"> <label ...

  10. 在Ubuntu 18.04上使用msmtp和gmail，git-sendemail发送patch给kernel

    这是我第一次发送patch给kernel,虽然仅仅是一个test的patch,但我也觉着很新奇,这也是自己的一个小小的进步. 如下是从各种网站上学到的如何发送patch的总结. 1. Create g ...