当前位置:首页 > 图形处理 > HTML5配套资源
《《从0到1:HTML5 Canvas动画开发》PPT,动态图,总结》电子书封面

《从0到1:HTML5 Canvas动画开发》PPT,动态图,总结

  • 发布时间:2021年04月07日 14:37:27
  • 作者:莫振杰
  • 出版:人民邮电出版社
  • 大小:11 MB
  • 类别:HTML5资料
  • 评分:9.7

    《从0到1:HTML5 Canvas动画开发》PPT,动态图,总结

      给大家带来的是《从0到1:HTML5 Canvas动画开发》PPT,动态图,总结,介绍了关于HTML5、Canvas、动画开发方面的内容,本书是由人民邮电出版社出版,配套资源大小为11 MB,莫振杰编写,目前本书在HTML5类综合评分为:8.8分

      Tags:HTML5 Canvas 动画开发 

      内容介绍

      作者根据自己多年的前后端开发经验,详尽介绍了HTML5 Canvas 动画开发技术。 

      《从0到1 HTML5 Canvas动画开发》分为两大部分:第一部分介绍Canvas 基础知识,主要包括Canvas 概述、直线图形、曲线图形、线条操作、文本操作、图片操作、变形操作、像素操作、渐变与阴影、Canvas 路径、Canvas 状态及其他应用; 

      第二部分介绍Canvas 进阶知识,主要包括事件操作、物理动画、边界检测、碰撞检测、用户交互、高级动画、Canvas 游戏开发、Canvas 图表库。 

      此外,本书还配备了书中所有案例的源代码和PPT 教学课件,以方便学校老师教学。本书适合作为前端开发人员的参考书,也可以作为各类院校相关专业的教材及教学参考书。

      目录

      • 第 一部分 Canvas 基础 n
      • 第 1 章 Canvas 概述 3 n
      • 1.1 Canvas 是什么 3 n
      • 1.1.1 Canvas 简介 3 n
      • 1.1.2 Canvas 与SVG 5 n
      • 1.2 Canvas 元素 5 n
      • 1.2.1 Canvas 元素简介 6 n
      • 1.2.2 Canvas 对象 8 n
      • 第 2 章 直线图形 10 n
      • 2.1 直线图形简介 10 n
      • 2.2 直线 10 n
      • 2.2.1 Canvas 坐标系 10 n
      • 2.2.2 直线的绘制 11 n
      • 2.3 矩形 16 n
      • 2.3.1 描边矩形 16 n
      • 2.3.2 填充矩形 18 n
      • 2.3.3 rect() 方法 22 n
      • 2.3.4 清空矩形 24 n
      • 2.4 多边形 26 n
      • 2.4.1 箭头 26 n
      • 2.4.2 正多边形 27 n
      • 2.4.3 五角星 30 n
      • 2.5 实战题:绘制调色板 31 n
      • 第3 章 曲线图形 34 n
      • 3.1 曲线图形简介 34 n
      • 3.2 圆形 34 n
      • 3.2.1 圆形简介 34 n
      • 3.2.2 描边圆 35 n
      • 3.2.3 填充圆 38 n
      • 3.3 弧线 39 n
      • 3.3.1 arc() 方法画弧线 39 n
      • 3.3.2 arcTo() 方法画弧线 43 n
      • 3.4 二次贝塞尔曲线 47 n
      • 3.5 三次贝塞尔曲线 50 n
      • 3.6 实战题:绘制扇形 54 n
      • 第4 章 线条操作 57 n
      • 4.1 线条操作简介 57 n
      • 4.2 lineWidth 属性 57 n
      • 4.3 lineCap 属性 60 n
      • 4.4 lineJoin 属性 63 n
      • 4.5 setLineDash() 方法 65 n
      • 第5 章 文本操作 67 n
      • 5.1 文本操作简介 67 n
      • 5.2 文本操作方法 67 n
      • 5.2.1 strokeText() 方法 68 n
      • 5.2.2 fillText() 方法 69 n
      • 5.2.3 measureText() 方法 71 n
      • 5.3 文本操作属性 73 n
      • 5.3.1 font 属性 73 n
      • 5.3.2 textAlign 属性 74 n
      • 5.3.3 textBaseline 属性 76 n
      • 第6 章 图片操作 78 n
      • 6.1 图片操作简介 78 n
      • 6.2 绘制图片 78 n
      • 6.2.1 drawImage(image , dx , dy) 78 n
      • 6.2.2 drawImage(image , dx , dy , dw , dh) 81 n
      • 6.2.3 drawImage(image , sx , sy , sw ,sh, n
      • dx , dy , dw , dh) 83 n
      • 6.3 平铺图片 85 n
      • 6.4 切割图片 88 n
      • 6.5 深入图片操作 91 n
      • 第7 章 变形操作 94 n
      • 7.1 变形操作简介 94 n
      • 7.2 图形平移 94 n
      • 7.2.1 translate() 方法 94 n
      • 7.2.2 clearRect() 方法清空Canvas 98 n
      • 7.3 图形缩放 99 n
      • 7.3.1 scale() 方法 99 n
      • 7.3.2 scale() 方法的负作用 103 n
      • 7.4 图形旋转 104 n
      • 7.4.1 rotate() 方法 104 n
      • 7.4.2 改变旋转中心 107 n
      • 7.5 变换矩阵 108 n
      • 7.5.1 transform() 方法 108 n
      • 7.5.2 setTransform() 方法 113 n
      • 7.6 深入变形操作 115 n
      • 7.7 实战题:绘制绚丽的图形 117 n
      • 7.8 实战题:绘制彩虹 118 n
      • 第8 章 像素操作 120 n
      • 8.1 像素操作简介 120 n
      • 8.1.1 getImageData() 方法 120 n
      • 8.1.2 putImageData() 方法 121 n
      • 8.2 反转效果 122 n
      • 8.3 黑白效果 125 n
      • 8.4 亮度效果 128 n
      • 8.5 复古效果 129 n
      • 8.6 红色蒙版 131 n
      • 8.7 透明处理 133 n
      • 8.8 createImageData() 方法 134 n
      • 第9 章 渐变与阴影 138 n
      • 9.1 线性渐变 138 n
      • 9.2 径向渐变 142 n
      • 9.3 阴影 147 n
      • 第 10 章 Canvas 路径 152 n
      • 10.1 什么是路径? 152 n
      • 10.2 beginPath() 方法和closePath() n
      • 方法 152 n
      • 10.2.1 beginPath() 方法 152 n
      • 10.2.2 closePath() 方法 155 n
      • 10.3 isPointInPath() 方法 161 n
      • 第 11 章 Canvas 状态 164 n
      • 11.1 什么是状态 164 n
      • 11.2 clip() 方法 164 n
      • 11.3 save() 方法和restore() 方法 167 n
      • 11.3.1 图形或图片剪切 168 n
      • 11.3.2 图形或图片变形 170 n
      • 11.3.3 状态属性的改变 172 n
      • 第 12 章 其他应用 175 n
      • 12.1 Canvas 对象 175 n
      • 12.1.1 Canvas 对象属性 175 n
      • 12.1.2 Canvas 对象方法 177 n
      • 12.2 globalAlpha 属性 179 n
      • 12.3 globalCompositeOperation 属性 180 n
      • 12.4 strokeStyle 和fillStyle 184 n
      • 第二部分 Canvas 进阶 n
      • 第 13 章 事件操作 191 n
      • 13.1 Canvas 进阶简介 191 n
      • 13.2 鼠标事件 191 n
      • 13.2.1 鼠标事件简介 191 n
      • 13.2.2 获取鼠标指针位置 192 n
      • 13.3 键盘事件 194 n
      • 从0 到1 系列图书 目录 2 n
      • 13.3.1 键盘事件简介 194 n
      • 13.3.2 获取物体移动方向 195 n
      • 13.4 循环事件 198 n
      • 第 14 章 物理动画 201 n
      • 14.1 物理动画简介 201 n
      • 14.2 三角函数简介 202 n
      • 14.2.1 什么是三角函数 202 n
      • 14.2.2 Math.atan() 与Math.atan2() 203 n
      • 14.3 三角函数应用 208 n
      • 14.3.1 两点间距离 208 n
      • 14.3.2 圆周运动 210 n
      • 14.3.3 波形运动 215 n
      • 14.4 匀速运动 220 n
      • 14.4.1 匀速运动简介 220 n
      • 14.4.2 速度的合成和分解 221 n
      • 14.5 加速运动 225 n
      • 14.5.1 加速运动简介 225 n
      • 14.5.2 加速度的合成和分解 228 n
      • 14.6 重力 230 n
      • 14.6.1 重力简介 230 n
      • 14.6.2 重力应用 231 n
      • 14.7 摩擦力 235 n
      • 第 15 章 边界检测 238 n
      • 15.1 边界检测简介 238 n
      • 15.2 边界限制 239 n
      • 15.3 边界环绕 241 n
      • 15.4 边界生成 246 n
      • 15.5 边界反弹 252 n
      • 第 16 章 碰撞检测 257 n
      • 16.1 碰撞检测简介 257 n
      • 16.2 外接矩形判定法 257 n
      • 16.3 外接圆判定法 265 n
      • 16.4 多物体碰撞 269 n
      • 16.4.1 排列组合 269 n
      • 16.4.2 多物体碰撞 270 n
      • 第 17 章 用户交互 277 n
      • 17.1 用户交互简介 277 n
      • 17.2 捕获物体 277 n
      • 17.2.1 捕获物体简介 277 n
      • 17.2.2 捕获静止物体 279 n
      • 17.2.3 捕获运动物体 281 n
      • 17.3 拖曳物体 285 n
      • 17.4 抛掷物体 290 n
      • 第 18 章 高级动画 299 n
      • 18.1 高级动画简介 299 n
      • 18.2 缓动动画简介 299 n
      • 18.3 缓动动画应用 306 n
      • 18.4 弹性动画简介 310 n
      • 18.5 弹性动画应用 314 n
      • 第 19 章 Canvas 游戏开发 319 n
      • 19.1 Canvas 游戏开发简介 319 n
      • 19.2 Box2D 简介 320 n
      • 19.2.1 Box2D 320 n
      • 19.2.2 Box2DWeb 320 n
      • 19.3 HTML5 游戏引擎 323 n
      • 第 20 章 Canvas 图表库 326 n
      • 20.1 Canvas 图表库简介 326 n
      • 20.2 ECharts 和HightCharts 327

      笔记精选

      jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

      本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考,具体如下:

      运行效果截图如下:

      jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

      点击此处查看在线演示。

      完整实例代码点击此处本站下载。

      具体代码如下:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>jQuery实现点赞数字累加动画效果</title>
      <style type="text/css">
      *{margin:0;padding:0;list-style-type:none;}
      a,img{border:0;}
      html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";}
      .tip{text-align:center;padding-top:10%;font-size:2em;}
      </style>
      <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
      <script type="text/javascript">
      $("html,body").on("click",function(e){
        anp(e);
      })
      function anp(e){
        var n=Math.round(Math.random()*10);
        var $i=$("<b>").text("+"+n);
        var x=e.pageX,y=e.pageY;
        $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"});
        $("body").append($i);
        $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
          $i.remove();
        });
        e.stopPropagation();
      }
      </script>
      </head>
      <body>
      <div class="tip">点击页面任意位置查看效果</div>
      </body>
      </html>
      
      

      希望本文所述对大家jQuery程序设计有所帮助。

      上一篇:《AutoCAD 2021中文版从入门到精通》动画演示,源文件

      下一篇:《企业纳税筹划实用方法与案例解析》PPT

      查看更多
      HTML5 相关资源
      HTML5+Canvas开发详解
      HTML5+Canvas开发详解 PDF 第2版

      通过 HTML5+Canvas开发详解(第2版) ,你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更

      立即下载
      HTML5与WebGL编程
      HTML5与WebGL编程 PDF 高清版

      本书介绍如何使用HTML5相关技术,如CSS3和新兴的Web图形标准WebGL,来创建具有高性能、震撼视觉效果的3D Web应用。书中内容分为两部分基础知识和应用开发技术,不但提供了全面的理论介绍,还

      立即下载
      细说HTML5高级API
      细说HTML5高级API PDF 原书扫描版

      本书主要的目的是应用现阶段的主流WEB高级API ,以及如何适用传统的Web技术构建跨平台的移动端应用,本书比较适合有一定的JavaScript+HTML5开发基础的读者,希望读者能够从每个例子中举一反三,

      立即下载
      从零开始学HTML5+CSS3
      从零开始学HTML5+CSS3 PDF 超清版

      本书循序渐进介绍使用HTML5与CSS3创建Web应用的专业知识,包含CSS基础知识,CSS选择器,使用CSS插入内容,HTML5视频和音频的应用和控制,使用Canvas和SVG绘制图形等内容

      立即下载
      HTML5权威指南
      HTML5权威指南 PDF 超清版

      做为下代Web规范,HTML5着眼于为互联网技术开发人员构建更为方便快捷、对外开放的沟通交流服务平台。业内广泛认为,在将来两年内,HTML5毫无疑问将变成移动互联行业的主宰者。 《 HTML5权威

      立即下载
      HTML5+CSS3从入门到精通
      HTML5+CSS3从入门到精通 PDF 影印标准版

      《HTML5 CSS3从入门到精通(标准版)》 系统讲解了HTML5和CSS3的基础理论和实际运用技术,通过大量实例对HTML5和CSS3进行了深入浅出的分析。本书分为两大部分,共25章,包括HTML5概述、HTML5文档结

      立即下载
      读者心得
      35小时15分钟前回答

      JS/HTML5游戏常用算法之追踪算法实例详解

      本文实例讲述了JS/HTML5游戏常用算法之追踪算法。分享给大家供大家参考,具体如下: 追踪算法在动作游戏中非常常见,从很早的游戏《吃豆人》到大型的街机机战类游戏,到处可见追踪效果的身影。一个好的追踪算法将会大大提高游戏的可玩性和玩家的兴趣。 【简单算法】 先来看一个简单的跟踪算法,如下图所示,假设在canvas坐标系中存在物体A和B,物体A将把B作为追踪目标,物体在二维空间中的运动可以分解为坐标系中X、Y轴的运动,其在X和Y方向的速度决定了物体运行的方向和速率。别忘了,速度是有方向和大小的,于是物体A的速度在X、Y轴方向分解成vx、vy,B物体也是一样,这样,如果物体A要……

      38小时20分钟前回答

      jQuery(非HTML5)可编辑表格实现代码

      功能 : 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容。 主要实现思路 : 选中,移动选中区域等都是依靠jQuery强大的API进行实现的。而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据 源代码 : HTML代码: table class="editableTable" thead tr thItem1/th thItem2/th thItem3/th /tr /thead tbody tr td class="editable simpleInput"arthinking/td td class="editable simpleInput"Jason/td td class="editable simpleInput"itzhai/td /tr tr td class="editable simpleInput"arthinking/td td class="editable simpleInput"Jason/td td class="editable……

      码农之家

      弓兴学 提供上传

      资源
      30
      粉丝
      36
      喜欢
      55
      评论
      8

      Copyright 2018-2021 www.xz577.com 码农之家

      版权投诉 / 书籍推广:520161757@qq.com