本篇主要讲，html5 canvas中图形的填充（filling）功能应用，主要包括基本颜色定义（Basic Colors）、渐变（Gradient）、图案（Pattern）、阴影（Shadow）；先贴一个以下所有涉及到的实现运行的基本代码段： Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowL...
Canvas所支持的Image API是非常强大的;我们可以直接加载图像，将其显示在Canvas上,也可以切割和拼接显示所需的任何图像部分;此外，Canvas给我们提供的存储其像素数据的功能，我们可以通过操纵像素数据，然后重新绘制到Canvas上。虽然Canvas只有提供少数的Image API函数，但它开辟一个像素级别操纵的世界；它使开发人员可直接在Web浏览器中创建优化的应用程序，而无需任何插件。Canvas Api允许访问DOM定义的Image对象:<img></img>, ...
上一篇，主要讲了canvas提供的基本的Image API；本篇我们使用canvas提供的Image Api及变换，来实现一些实例：小车的简单运动、简单游戏地图、图像的平移缩放；以下应用中使用到的图片：图片1：tanks--[32*32]*8--tanks.png图片2：map--[32*32]*4--map.png 我们在Canvas上(50,50)的位置上显示tanks的前1/8部分(第一个tank)，如何做呢？我们用part of image api;context.drawImage(tanks,0,0,32,32,50,50,32,32);如果要使当前的tan...
Web Storage是HTML5 API提供一个新的重要的特性；最新的Web Storage草案中提到，在web客户端可用html5 API，以Key-Value形式来进行数据持久存储；目前主要的浏览器已经支持该功能；常见的web客户端数据存储比较：Html5 Web Storage非常易于Web开发者使用，他提供了非常简单的获取或设置key-value对的API； 支持的数据大小由网页浏览器厂商来决定，大多数支持都是5M或10M以上；这就意味着，我们可以在客户端存储更多有关用户及会话的...
HT for Web作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。以上抓图为本文介绍的例子最终运行效果，接下来我们一步步来实现，首选显示地图信息需要有城市经纬度数...
该例子展示了如何构建两个节点、一条连线、以及一个 Group 的组合效果。可以容易理解构建一个拓扑界面基本上就是操作 DataModel 数据模型，以下为构建上图界面效果的模型代码部分：// init data modelhello = new ht.Node(); hello.setPosition(60, 140); hello.setName(Hello); hello.setStyle(note, I love HT); hello.setStyle(note.background, #FFA000); dataModel.add(hello);world = new ht.Node(); world.set...
只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas；下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等； 先贴一个以下所有涉及到的实现运行的基本代码段：Base code<!DOCTYPE html> <html><head><meta charset="utf-8" /><script type="text/javascript" src="modernizr-latest.js"></script><script type="text/javascrip...
width="750">一、<canvas>标签Html5 引入了一个新的 <canvas> 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢?新闻链接：Google声称Chrome7浏览器将提速60倍<canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;">你的浏览器不支持 Ca...
说起HTML的结构，很多人都能说得头头是道，一般来说答案可能是这样的：一个DOCTYPE，一个html，里面有head和body元素。这当然不能说是不正确的，但是如果问到一个最小的HTML源文件必须有哪一些东西的话，恐怕很少有人能正确地做出回答。先来回答一下这个问题，一个最简的HTML5源码文件需要的内容如下：<!DOCTYPE html>是的，就这样，一个字符不多，一个字符不少，除了大小写可任意变化外，其他的任何内容都是不能变动的。那么究竟是...
http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5 中的 Canvas 对文本的渲染（fillText，strokeText）性能都不太好，比如设置字体（font）、文本旋转（rotation），如果绘制较多的文本时，一些交互操作会手动很大的影响，操作起来没那么顺畅，体验将会极其差，这不是我们想要的结果，再进一步和图片的绘制进行比较比较，你会发现，绘制图片和绘制文本在性能上不是一个等级的，在性能上绘制图片会好太多。我们今天就来...
http://www.gxlcms.com/wiki/48.html" target="_blank">Javascript执行机制 在HTML5之前，浏览器中JavaScript的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：Javascript 中的 setinterval 方法，setTimeout 方法等），但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地执行 Javascript 代码，从而实...
下面继续介绍基于http://www.gxlcms.com/wiki/1118.html" target="_blank">html5画布canvas的放大镜效果：主要步骤：1）图像的加载，上篇blog里有www.gxlcms.com/html5-tutorial-358646.html，必须注意apache的配置，否则getImageData()会有安全问题而无法运行！！2）核心：两个图像矩阵间的映射，设o为圆心，则变换后的点A‘对应的是原图像的A点（此乃放大的效果！！！本实验取放大倍数为2）3）为了简便起见，没有采用线性插值的方...
简介我常常想，如果网络应用能够读取和写入文件与目录，将会非常方便。从离线转移到在线后，应用变得更加复杂，而文件系统方面的API的缺乏也一直阻碍着网络前进。存储二进制数据或与其进行交互不应局限于桌面。令人欣慰的是，由于FileSystemAPI的出现，这一现状终于得到了改变。有了FileSystemAPI，网络应用就可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。API 被分为以下不同的主题：读取和处理文件：Fil...
http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5 canvas画图HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等...
在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果...