`
祈祷幸福
  • 浏览: 37324 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

今天用canvas模拟了一个taobao的时尚时钟照片

阅读更多
/*----------------------------------IT EYE祈祷幸福原创,转载请注明---------------------------------*/

不是属于技术问题讨论勒,所以还是直接贴图吧~~当然,如果细节画法不太清楚可以留言喔。。






ps、顺便说下还没解决的问题:
这个图片是在opera下抓的,chrome和firefox下,是有问题的。
主要原因是因为字体是华康少女字体W6,而这个字体是中文名字的。
font属性中,我是直接用这个中文名字设置的。
查了很多资料,没有找到对应的英文字体,也没有找到解决中文名字字体的其他可用写法,所以导致了在firefox下显示默认字体,而chrome是显示完全混乱。

如果你知道解决办法的话,可以告诉我喔。

本效果的源代码已经在开源中国分享,欢迎批评指点.
http://www.oschina.net/code/snippet_182987_9059


/*----------------------------------IT EYE祈祷幸福原创,转载请注明---------------------------------*/
  • 大小: 110.3 KB
分享到:
评论

相关推荐

    HTML5 canvas超逼真的模拟时钟特效

    "HTML5 canvas超逼真的模拟时钟特效"是利用这一技术创建的一个互动时钟应用,名为thooClock。这款特效时钟不仅外观逼真,还具备了现实生活中时钟的全部功能,如显示当前时间,而且增加了定时闹钟的特性,使得网页上...

    逼真的HTML5 canvas模拟时钟特效

    thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟。并且它还具有定时闹钟的功能。掩饰地址:http://www.jq22.com/jquery-info3928

    使用canvas制作一个动态时钟

    使用canvas实现动态时钟效果

    微信小程序使用canvas绘制实现时钟

    在这个场景下,我们将讨论如何利用canvas来实现一个实时更新的时钟功能。 首先,我们需要在微信小程序的页面配置文件(如`page.json`)中声明canvas组件,设置其在页面中的位置和大小。例如: ```json { ...

    html5:用canvas写一个时钟

    html5---用canvas写一个时钟

    canvas写一个时钟

    实现时钟的分针、时针和秒针的旋转移动

    HTML5 Canvas模拟二进制刻度的时钟动画效果源码.zip

    这个“HTML5 Canvas模拟二进制刻度的时钟动画效果源码”是一个使用Canvas API创建的实例,展示了如何利用HTML5的新特性来构建一个具有二进制刻度的时钟动画。 首先,我们需要理解HTML5 Canvas的基本结构。Canvas是...

    Html5-canvas 时钟

    使用html5中的canvas标签+jquery绘制的时钟走动代码

    canvas数字时钟效果

    在这个项目中,我们将深入探讨如何利用JavaScript和Canvas API构建一个实时更新的数字时钟。 首先,我们需要在HTML页面中创建一个canvas元素,并为其设置id以便在JavaScript中引用: ```html <canvas id="clock" ...

    canvas实现超级炫酷时钟

    在本文中,我们将深入探讨如何使用HTML5的Canvas API和JavaScript技术来创建一个炫酷的时钟。Canvas是一个强大的绘图工具,它允许我们在网页上动态地绘制图形,而JavaScript则提供了时间处理和动画功能。结合这两个...

    html5 canvas云粒子数字时钟动画特效

    总的来说,“html5 canvas云粒子数字时钟动画特效”结合了HTML5 Canvas的绘图能力、时间处理、粒子动画等多种技术,创建出一个引人入胜的视觉体验。这种效果不仅可以应用于网站装饰,也可以作为学习Canvas和...

    简洁易用的jQuery.clock-canvas基于canvas实现的时钟效果.zip

    本文将深入探讨一个基于jQuery和HTML5 Canvas技术的“jQuery.clock-canvas”插件,它以简洁、易用的方式实现了动态时钟的效果。我们将分析其工作原理,以及如何在自己的项目中集成并自定义这个时钟。 首先,让我们...

    HTML5 Canvas 动画时钟

    首先,我们需要获取到 `canvas` 的绘图上下文,通常使用 `getContext('2d')` 方法,返回一个 `CanvasRenderingContext2D` 对象,这是所有绘图操作的基础。 2. **设置时间和日期**: 使用 JavaScript 的内置 `Date...

    HTML5 canvas时钟效果.zip

    在这个“HTML5 canvas时钟效果.zip”压缩包中,包含了一个使用Canvas API实现的时钟显示功能。这个时钟不仅绘制了表盘、时针、分针和秒针,还展示了数字时间,为网页增添了一种实用且动态的元素。 1. **Canvas基本...

    html5 canvas画布绘制圆形时钟代码

    在上面的代码中,我们创建了一个宽高均为300像素的canvas元素,并引用了一个名为`clock.js`的JavaScript文件,该文件将包含实现时钟绘制的逻辑。 接下来,我们需要在`clock.js`中编写JavaScript代码。这里,我们将...

    HTML5 Canvas创意时钟特效.zip

    2. **绘制背景**:可以使用`fillStyle`设置填充颜色,然后用`fillRect()`或`clearRect()`方法清除或填充整个画布,为时钟提供一个干净的背景。 3. **绘制圆盘**:使用`arc()`函数画出一个圆形,表示时钟的表面。...

    h5,canvas实现时钟.zip

    6. **动画效果**:为了使时钟看起来更生动,我们可以使用requestAnimationFrame()创建一个动画循环,不断地重绘时钟,模拟指针的旋转。每次绘制之前清除整个画布,然后重新绘制所有元素,以实现平滑的动画效果。 在...

    基于html5 canvas模拟时钟程序【100012429】

    1、构造方法第一个参数支持传入canvas dom对象的id,既可以传canvas dom对象也可以传此dom对象的id。 2、增加setOptions方法,方便动态更新模拟时钟的属性。 3、修复传入options没有验证属性值的BUG,若传入的...

    h5用canvas实现漂亮的时钟效果

    在这个场景中,我们关注的是如何利用Canvas来实现一个美观的时钟效果。Canvas通过JavaScript来控制,因此我们可以实时更新时间,让时钟保持动态运行。 首先,我们需要在HTML文件中创建一个`<canvas>`标签,并为其...

Global site tag (gtag.js) - Google Analytics