0

HTML5 Canvas组合图形

Posted by Alan on October 10, 2016 in HTML5&CSS3 |

在学习Canvas组合图形时看描述有些云里雾里,于是记录下实际效果来方便查看:

Tags: ,

0

HTML5与CSS3权威指南读书笔记

Posted by Alan on October 5, 2016 in 学习笔记 |

1.datetime 日期和时间之间用T分隔,Z表示UTC标准时间,可使用+08:00等替代Z来表示对应的时区,pubdate属性通常代码文章的发布日期 2.由于一些浏览器尚未提供对H5新增结构元素的支持,可添加 而IE8及之前的浏览器不支持以上这种CSS的声明,需增加 3.表单 formaction, formmethod, formtarget来指定各表单元素对应的属性 autofocus indeterminate: checkbox的input表单元素新增了一种indeterminate状态,要使用这一状态,需在该元素的下方写一段JS或jQuery代码来将元素的indeterminate值赋为真 JS属性valueAsNumber,如document.getElementById(‘…’).valueAsNumber

Tags: ,

0

CSS3+HTML5实现活塞运动

Posted by Alan on July 31, 2014 in HTML5&CSS3 |

Html5配合CSS3已经越来越强大,以下通过CSS3+HTML5来模拟活塞运动。 首先设置背景颜色,这里仅测试了IE,Firefox和Chrome较新的版本,使用webkit也是为了兼容Chrome考虑: background: -webkit-linear-gradient(top, coral, tomato); background: linear-gradient(to bottom, coral, tomato); 通过代码定义活塞上下移动以及臂手(连动杆)左右摆动的动画: @-webkit-keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @-webkit-keyframes arm { 0% { […]

Tags: , ,

0

HTML5绘制桌球

Posted by Alan on May 25, 2014 in HTML5&CSS3 |

桌球(又称台球 ,撞球)源自英国,是一项在国际上广泛流行的高雅的室内体育运动,是一种用球杆在台上击球,依靠计算得分确定比赛胜负的室内娱乐体育项目。 下图为通过HTML5的Canvas配合JS生成的仿桌球图片,右侧的小球采用随机函数显示不同颜色,每次刷新后将显示不同的组合颜色。 Your browser does not support the canvas element.

Tags: , , ,

0

HTML5绘制奥运五环

Posted by Alan on May 25, 2014 in HTML5&CSS3 |

奥运五环是奥运会的标志,由Pierre de Coubertin顾拜旦先生于1913年所构思设计的,下面通过HTML5的canvas加js来绘制五环标志。部分代码如下: 创建Canvas:

通过javascript设置画布环境并绘制圆形:

由于IE9以前的版本及其它浏览器早期的版本对canvas不支持,所以将无法正常显示,图形效果如下: Your browser does not support the canvas element.

Tags: , , ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.