H5之canvas-绘制动态时钟
使用<canvas>元素不是非常难，但需要一些基本的HTML和JavaScript知识。 今天我们来利用canvas API绘制一个时钟，先上图： 画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。 canvas中圆形与矩形差距 ...
原文：学者玩玩Canvas-写个简单的模拟时钟
最近在看HTML ，随便玩玩Canvas，于是想着写个简单的模拟时钟，不过想象力不够丰富，没啥好创意，做的比较丑 哈哈 Demon点这儿你懂得 哈哈 代码： View Code 使用： View Code 超简单，所以思路就不多写了 每次刷新都是全幅重画的，本人比较懒 有些固定位置的部位 如耳朵，嘴巴 为了避免每次重绘都要重新计算位置，用circular对象保存 View Code 为Canvas ...
2014-04-03 10:36 7 1901 推荐指数：
相关推荐
canvas写个简单的小游戏
之前在HTML5 Canvas属性和方法汇总一文中，介绍过Canvas的各种属性以及方法的说明，并列举了自己写的一些Canvas demo，接下来开始写一个简单的小游戏吧，有多简单，这么说吧，代码不到100行，先上效果图:左侧为我们控制的控制板，右侧为假想的电脑控制的控制板体验小游戏链接 ...
canvas-简单快速实现知乎登录页背景效果
前言 打开知乎的登录页，就可以看到其背景有一个动效，看起来好像蛮不错的样子： 这个效果使用canvas是不难实现的，接下来就一步一步地讲解并实现这个效果。 分析 在动工之前先分析这个效果到底是如何运动的。首先要理解的是虽然看起来好像所有线和圆都在运动，但实际上只有圆才是在运动的，而线 ...
canvas-缩放
Canvas-图片缩放 由上一篇canvas-旋转的例子可以了解到canvas的一些特性，不熟悉的同学可以先去看看canvas-旋转。 我们在将图片引入canvas时，图片会一原始像素渲染。这样往往不是我们想要的大小。这时就要用到canvas的scale(x, y ...
Canvas-图片旋转
众所周知canvas是位图，你可以在里面渲染你要的东西，不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西，例如我在canvas里添加一幅画，我现在想将那幅画移动10px，我们并不能直接操作那幅画，因为我们根本获取不到那幅画的任何信息。我们永远只能获取 ...
Canvas-图片旋转
Canvas-图片旋转 众所周知canvas是位图，你可以在里面渲染你要的东西，不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西，例如我在canvas里添加一幅画，我现在想将那幅画移动10px，我们并不能直接操作那幅画，因为我们根本获取不到那幅画 ...
简单酷炫的Canvas数字时钟
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 我记得很早之前就看过这个DEMO，是岑安大大博客里看到的： 就是这个数字时钟，当时觉得这个创意不错，但是也没去折腾。直到昨天同事又在网上看到这个案例，他觉得很酷炫，就跑过来问我，这个是怎么实现的，然后我大概想了 ...
html5 canvas-笑脸制作
效果： HTML代码为： JS代码为： ...