2017-03-03 15:58:27
2017-03-03 16:02:20
2017-03-03 16:08:39
2017-03-03 16:13:55
HTML5 Canvas平移,放缩,旋转图文代码详情
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y)图示如下:任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x
3565
2017-03-03 16:16:17
提高HTML5 Canvas性能的技巧
一:是用缓存技术实现预绘制,减少重复绘制Canvs内容很多时候我们在Canvas上绘制与更新,总是会保留一些不变的内容,对于这些内容应该预先绘制缓存,而不是每次刷新。直接绘制代码如下:context.font=24px Arial;context.fillStyle=blue;context.fillText(Please press to exit game
1493
2017-03-03 16:24:22
HTML5 组件Canvas实现电子钟的图文代码详情介绍
基本思路:首先绘制一个矩形背景,设置颜色为灰色。在背景上绘制一个简单的矩形外边框,然后再绘制一个内边框,接着加载选定的图像做为电子钟内部的背景图片。然后开始绘制时钟刻度,绘制分钟刻度,最后获取当前系统时间,绘制时分秒三个手柄。 技术要点:使用HTML5的Canvas 2D绘制对象,主要使用context.save()与context.restore()方法来保存绘制状态
1744
2017-03-03 16:28:05
HTML5 Canvas组件绘制太极图案的图文代码详情
一实现思路:实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。 最后在绘制好的两个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。二程序效果如下:三关
2496
2017-03-03 16:32:59
HTML5 组件Canvas实现图像灰度化的实例代码
HTML5发布已经有很长一段时间了,一直以来从来没有仔细的看过,过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大,不怪很多牛人预言Flash已死,死不死不是我要关心的,我关心的Canvas可以很轻松在网页中实现简单相框和图像灰度化。一起来看看HTML5 Canvas是怎么做到的吧!1. 新建一个html页面,在body tag之间加入Gra
1938
2017-03-03 16:49:52
2017-03-03 16:51:22