zoukankan      html  css  js  c++  java
  • 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑。最近看的《HTML5+JavaScript 动画基础》这个是译本,Keith Peters曾写过《Foundation ActionScript Animation》其中的数学原理被不少人转载引用,学习过AS的对这本书应该有了解。基于此,才有的这本书,HTML5版本的动画原理。哈哈,庆幸我是数学出身的~~~ 这本书上有些bug,本来做了记录,结果被当废纸扔掉了 - -!目前不能分享,只能在看的时候再记录一遍。

    前段时间忙事情随笔停了,现趁春节来个年末奋斗学习!大致顺序,先理解浏览器动画原理,再熟悉canvas,再用canvas做游戏 !

    暂定目录如下,Canvas的部分我主要翻译 Safari开发者Canvas Introduction ,对比而言它讲解的比较全比较偏原理吧,其它主要讲用法。

    其它文献引用,我会加在尾部哦,如有遗漏请联系我哦~~~

    1、JavaScript的单线程性质以及定时器的工作原理

    2、requestAnimationFrame

    Canvas

    第一、介绍Canvas

    canvas标签
    针对Retina设备

    第二、画线和路径

    设置描边和填充样式
    画矩形
    路径和子路径
    设置线的顶端和连接处
    第三 画曲线
    贝塞尔或者二次方程曲线
    画弧线
    认识曲线中的arcTo
    ---后续有个画箭头

    第四 渐变和图案

    线性渐变
    径向渐变
    图案

    第五 使用预绘制图片

    绘制图像
    按照给定的宽高绘制图像
    绘制带测绘区region mapping 的图像

    第六 添加文字

    字体设置
    文字的方向
    文字对齐
    基准线
    ---Bounding Box Width

  • 相关阅读:
    Extjs renderer函数
    孩子,教育,钱
    《新概念英语》的学习方法
    英语,想说爱你爱的太晚
    window.open模拟表单POST提交
    Extjs 解决grid分页bug问题
    Extjs 判断对象是非为null或者为空字符串
    linux shell 删除满足正则表达式的文件
    OpenCV 生成矩形mask
    测试Kaggle kernel commit 是否会删除以前的output
  • 原文地址:https://www.cnblogs.com/yixiaoheng/p/canvas-animation-0.html
Copyright © 2011-2022 走看看