先上一个完整的简单案例，能在ios和安卓手机上都解决视频层级和隐藏控制条的需求， 建议用手机查看：demo 在安卓手机上，使用video播放视频有个问题，video控件层级会永远在顶层，不利于视频互动H5开发，而IOS手机上不会有此问题。 腾讯给出了如下解决方案： <video src="http://xxx.mp4" x5-video-player-type="h5"/>   但使用如上属性，视频播放时会全屏，且会将top bar挤掉（没试过的可以自行测试下），且只适用于微信，点此跳到腾讯相关开发说明 官方的方法走不通，其实可利用jsmpeg插件解决 jsmpeg是一个能将视频...

代码较多，直接上链接（手机打开或PC浏览器开手机模拟模式打开） http://wx.karlew.com/editImg/ 用了上篇文章的blob方式预览图片，支持旋转，拖动，放大缩小图片 代码下载地址：https://github.com/karlew/upLoadImg

编写过程最头痛就是椭圆公式的处理，数学忘得差不多，补起来累。。。 思路就不话篇幅写了，源代码挺短，关键部分都有注释，有兴趣看看便是。 直接上效果：   带全轨迹 演示：http://wx.karlew.com/canvas/atom/fullTrack.html   带部分轨迹 演示：http://wx.karlew.com/canvas/atom/   带部分轨迹，轨迹有粗细变化（在手机上看会挺卡） 演示：http://wx.karlew.com/canvas/atom/specialTrack.html   源码：https://github.com/karlew/canvas/tree/master/atom

昨天发布的文章介绍了贝塞尔曲线描绘工具，就拿最近挺火的害怕表情图来写一下，canvas描绘简单图片的过程（其实复杂的也能画，只是时间太长）： 首先在网上搜一张普通的害怕高清重制图，如下：   表情的画质真是感人。。。   所用工具： 1.Photoshop_CS5  ,调出信息窗口用于找坐标 2.贝塞尔曲线绘制工具 ，简称bezier工具，使用方法见上篇文章，用于绘制贝塞尔曲线。   借助代码，一步步看看绘图过程：   由于初始是透明背景，故用白色填充 var canvas=document.querySelector("canvas"); var ctx=canvas.get...

演示：http://wx.karlew.com/canvas/bezier/ 源码：https://github.com/karlew/bezier-tool-for-canvas 用途： 在左边操作贝塞尔曲线的相应点，在右边会实时更新canvas上该贝塞尔曲线的参数 便于得到想要的贝塞尔曲线形状   或是想用canvas进行绘图需要参考图时，亦可点击upload上传图片，根据图片线条，手动匹配出相应的贝塞尔曲线  

不久前看到宝洁公众号一个利用canvas+flood fill（也就是洪水填充）涂色的H5页，觉得挺好玩有空的时候也写了两个涂色页，下面给出demo和完整参考代码下载，献给html5前端爱好者： 演示地址：http://wx.karlew.com/bear/ 完整代码：https://github.com/karlew/canvas-flood-fill 下载的源码在本地用谷歌浏览器预览时，会出现 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' 的错误（具体原因可百度），建议用火狐或IE浏览器浏览，或者用php等代替html页面，又或者上传到服务器查看。