http://item.jd.com/11241807.html HTML5移动Web开发实战http://item.jd.com/10982275.html HTML5程序设计(第2版)http://item.jd.com/1049266194.html HTML5游戏开发http://item.jd.com/11231175.html HTML5 Canvas核心技术:图形.动画与游戏开发http://item.jd.com/11253207.html HTML5+JavaScript动画基…

最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪,放到博客里就闪了,我也不知道为什么...回头我再看看是什么问题. 另外,我把代码放到github上了,博友们也可以直接down代码,不需要任务服务,本地就能跑起来.大家要是觉得还行,就给个star吧!源码地址点这里 首先截个图来看看界面效果: 下买我就做游戏的步骤来分享总结一下用到的h5API和一些…

canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上(0,0)的位置. 首先定义一个旋转的角度a,比如想要旋转45度. a=45*Math.PI/180 rotate(a):rotate的旋转参数是弧度.注意,旋转之前要先设定旋转的中心点. function cxt_rota…

前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持「上传压缩」,但仍可以自己来实现. Flash 首选方案当然是 Flash,毕竟它提供了压缩 API.除了 zip 格式,还支持 lzma 这种超级压缩.因为是原生接口,所以性能极高.而且对应的 swf 文件,也非常小. JavaScript Flash 逐渐淘汰,但取而代之的 HTML5,却没有提…

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然…

前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一段代码(下文具体解释代码作用): window.TrackTransform = function () { var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); var xform = svg.c…

默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接映射到一个CSS像素上. 但是如果图像的每次绘制都参考一个固定点将缺少灵活性,于是在canvas中引入“当前坐标系”的概念,所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系,它也会作为图像状态的一部分.比如rotate旋转操作,改变当前坐标系也就是改变了rotate的参考点,试想下如果没有当…

画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描述 translate dx,dx 转换的量的 X 和 Y 大小 scale sx,sy 水平和垂直的缩放因子 rotate angle 旋转的量,用弧度表示.正值表示顺时针方向旋转,负值表示逆时针方向旋转. setTransform a,b,c,d,e,f 水平缩放,水平倾斜(与旋转有关),垂直倾…

本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas> 获取绘图环境 canvas元素本身没有任何外观,它就是一块空白画板,提供给JS的一套API,大部分的API都…

html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在canvas中(x,y)处绘制图片. drawImage(image,x,y,width,height):在canvas中(x,y)处绘制图片,并将其缩放到指定的宽度和高度. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,w…