摘要：
使用方法： 1、打开阿里巴巴图标库http://www.iconfont.cn 2、选择想要的字体图标，加入购物车 3、打开购物车，点击下载代码 Unicode 引用 Unicode 是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持 IE6+，及所有现代浏览器。 支持按字体的方式去动态调整 阅读全文
摘要：
1.基本理解 骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。 骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。 效果图 注意点： 1, 引入组建后, template 标签内加入<skeleton selector="skeleton" bgcolor="#FFF 阅读全文
摘要：
原始页面是网页端demo，我从0开始学习，并调整为移动端H5页面。 另外对原文做了部分调整：修改了index页面循环不停止，部分代码冗余等问题，并增加注释。 本文为游戏的loading页面。初始化canvas，加载音乐，背景图片等游戏资源，显示开始游戏按钮。 效果图： 两点疑问： 1、RAF为什么不 阅读全文
摘要：
（1）天气网：http://www.tianqi.com/plugin/（2）中国天气网：https://cj.weather.com.cn/（3）天气API：http://www.tianqiapi.com/ 阅读全文
摘要：
动画实现： 通过setInterval方法不停的调用context.clearRect()方法清理画布，然后再重新绘制页面。 此外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 init(); function init 阅读全文
摘要：
效果图： 知识点： 1、ctx.save(); //保存ctx状态 ctx.restore();//回到之前ctx的状态 一般ctx.save()与ctx.restore()是成对出现的，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方 阅读全文
摘要：
效果图： 知识点： 1、五角星顶点坐标 (r*cos(deg)+x,-r*sin(deg)+y) 2、画圆 ctx.arc(x,y,r,0,2*Math.PI); //后两个参数开始弧度，结束弧度。0表示开始弧度为3点钟方向，0.5PI为90度。 代码： <!DOCTYPE html> <html> 阅读全文
摘要：
效果图： 知识点： 1、context.beginPath(); 2、context.closePath(); 3、context.Rect(x,y,width,heght); context.fllRect(x,y,width,heght); context.strokeRect(x,y,widt 阅读全文
摘要：
<canvas> 标签是 HTML5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。 <canvas id="canvas"> 您的浏览器不支持canvas </canvas> 兼容性 阅读全文
摘要：
效果图： 知识点： 1、transform-origin 2、弧度计算公式 (2*Math.PI/360)*角度 3、表盘数字计算方法 x=r(1+Math.cos(弧度))； y=r(1+math.sin(弧度))； 完整代码： <!DOCTYPE html> <html> <head> <met 阅读全文