最近项目需求中要写较多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. 系统整理qt笔记1

    main.cpp #include "mywidget.h" #include <QApplication>//包含一个应用程序类的头文件 #include <i ...

  2. LeetCode-097-交错字符串

    交错字符串 题目描述:给定三个字符串 s1.s2.s3,请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...

  3. LeetCode-095-不同的二叉搜索树 II

    不同的二叉搜索树 II 题目描述:给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 .可以按 任意顺序 返回答案. 二叉搜索树(Binary ...

  4. Sublime Text3中文环境设置

    Sublime Text3中文环境设置 1.首先打开安装好的的Sublime软件,选择Preferences下面的Package Contorol选项出现弹窗方框 2.在弹窗输入install pac ...

  5. vue+echarts可视化大屏,全国地图下钻,页面自适应

    之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...

  6. LGP4284题解

    这个题,题面是[],出题人也是个[] 真就只放前向星过,把 vector 和离线建图都卡了... 题意: 一棵树,一条边有 \(p_i\) 的概率连接两个节点,一个点有 \(P_i\) 的概率亮着,问 ...

  7. LGP7890题解

    前置芝士的光速幂技巧. 本题解不是正解,和正解唯一的差别在于对幂的处理. 我们能够发现有: \[F(n,m,k)=\frac 1 n \binom {n+m-1} m \] 证明见这里. 然后我们开始 ...

  8. ArcGIS下载安装

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

  9. ListBox 控件模板

    <Window x:Class="WpfApplication22.MainWindow" xmlns="http://schemas.microsoft.com/ ...

  10. Net中事件的高级用法之三

    1.事件的高级应用 使用事件可以解除代码耦合 2.事件高级应用实例 using System; using System.Collections.Generic; using System.Linq; ...