代码改变世界

随笔分类 - HTML5

HTML5 的两个不错的文档

2012-02-29 11:04 by Terry_龙, 1040 阅读, 收藏, 编辑
摘要:网上看到的两个比较不错的HTML5文档,保存下来,以备以后查阅。HTML5 Canvas Cheat Sheet关于html5 Canvas的文件,可以用作参考。都是些如何操作canvas的方法和属性用法,还配有详细的图解 aboutHTML5 Canvas Cheat Sheet 详细地HTML 节点标签说明 阅读全文

HTML5 学习手笔四:canvas 总结

2012-02-28 10:43 by Terry_龙, 2558 阅读, 收藏, 编辑
摘要:什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法Canvas 对象Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。你可以直接在该对象上指定宽度和高度,但是,其大多数功能都可以通过 CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 " 阅读全文

HTML5 学习手笔三:canvas API 绘制树形图案B

2012-02-27 16:26 by Terry_龙, 5261 阅读, 收藏, 编辑
摘要:继续为上篇的跑道树林添砖加瓦。本篇大纲 加载图像做为树干的背景 为树干实现渐变效果 使用背景图让跑道更加真实 1):使用HTML5的scale功能缩放树木 。2):使用rotate制造倾倒树木的效果 为树木添加阳光照射下的阴影效果 添加文本标题,并为文本增加阴影效果,使用Canvas Shadow API。加载图像做为树干的背景,功能点为:在canvas 中插入图片上篇使用矩形填充颜色的功能为树冠增加树干,但总体效果并不是很理想,达不到真正树木的要求。我们需要一张更带有树皮纹理的图片做为树干,基本的步骤分为: 创建图片对象 为图片... 阅读全文

HTML5 学习手笔二:canvas API 绘制树形图案A

2012-02-25 13:46 by Terry_龙, 3036 阅读, 收藏, 编辑
摘要:上篇通过对canvas 画对角线,了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林。本篇大纲 用canvas API绘制树木的树冠 为树冠的边框架加粗并且填充树冠颜色 为树冠创造一个强大的树干 绘制跑道用canvas API绘制树木的树冠原理还是与上篇画对角线一样,只是步骤增多而已,先看代码:<scripttype="text/javascript">functioncreateCanopyPath(context){context.beginPath();context.moveTo(-25,.. 阅读全文

HTML5 学习手笔一:canvas API 画对角线

2012-02-24 16:13 by Terry_龙, 3883 阅读, 收藏, 编辑
摘要:自从停博一段时间后,一直在思考特别是今年开年,在想学习什么技术做为未来的技术储备。本来想加强下Android 底层方面的知识,但觉得工作上跟这块有所涉及再学习的话有点懒,由于Windows Phone 7 开发工作上没有涉及,目前也算是入门,未来短时间内不会考虑将其应用于工作选择,故不做考虑。现选择了两个方向为:IOS和HTML5,手上的毛主席相对比较紧还没有买MAC,所以优先选择了HTML5先涉猎一下,以后再考虑精通或者再涉猎IOS,作为未来的技术储备。 关于HTML5的简介和推广者网上一大把资料这里就略过,直接进入主题。 在页面中加入HTML5->canvas 在HTML页面中插入. 阅读全文