一、坐标系 其实只要玩过一点点图形编程的人都知道,电脑上的坐标系和数学上的坐标系稍微有点不同,坐标的原点在绘制区域(这里是Canvas)的左上角,X轴正向朝右,Y轴正向朝下,如下图声明:为本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处博客园二、Stroke 和 Fill HTML5中将图形分为两大类: 第一类称作 Stroke,我的理解就是轮廓、勾勒或者线条,总之,图形是由线条组成的; 第二类称作 Fill,就是填...
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的:从规范中可以注意到:b 和 i 元素将被赋予真正的语义。更应有预见性注意 b 、i 与 strong 、em 的不同使用 。扩展阅读:HTML4 到 HTML5 的变化 A Preview of HTML 5 The b element ...
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个: 1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。 2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。 针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包...
自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。 使用和下载 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。) 作者已经把js文件放在Google code project上并允许大家直接调用,当然,前提是你不在意调用额外的文件...
一、标签 Html5 引入了一个新的 标签,这个标签所代表的区域就好象一块画布,你的所有图形绘制最后都要在这块画布上呈现。有了这个标签,浏览器的图形表现力被极大的提升,Flash 和 SilverLight 有没有感到威胁呢? 新闻链接:Google声称Chrome7浏览器将提速60倍 标签的用法非常简单,如下: 代码如下: 你的浏览器不支持 Canvas 标签 标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景...
下面是源码 需要浏览器支持html5 代码如下: if(document.createElement("canvas")){ if(document.getElementById("colorPicker").getContext){ var can = document.getElementById("colorPicker"); can.setAttribute("height",300); var cxt = can.getContext("2d"); var gradient = cxt.createLinearGradient(0.5,0.5,0,150); gradient.addColorStop(0,'#00ff00'); gradient.addColorStop(1,'#ff0000'); cxt.fillStyle=...
这篇将要介绍一下 Canvas 中的基本图形。 图形的基础 - 路径 在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke 方法进行绘制时,都是依据这些路径点来进行填充或画线。 在每次开始绘制路径前,都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来...
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子很难,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。比较全面的上下滑动的小demo,代码比较简单。 下面是完整代码,我把几个重要的地方做了红色标记XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="w...
mvc是个好东西,为什么一入行的时候不去学一下,非要等到asp.net mvc出来了才去学;orm是个好东西,干嘛非要等到EF出来了才去学;html5是个好东西,干嘛非要等到IE9出来了才去学?...... ——我想自己应该改掉这个坏毛病。 废话不多说了。 需求:模仿dreamweaver里为图片画上锚点的功能,生成html代码里的coords值的功能。 技术分析:直觉告诉我,html5 canvas可以胜任。 由于从来没实质性接触过canvas,只看过别人用can...
本文收集了 15 个非常值得收藏的 HTML5 资源,这些资源可以让你同 HTML5 的发展保持一致,并始终处于这门技术的最前沿。1. WTF is HTML5这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。 2. Dive Into HTML 5Mark Pilgrim 是知名软件开发师与博客作者,他在线编写了一本有关 HTML5 的书,侧重 HTML5 的编程方面的功能。 3. HTML5 Doctor发布 HTM...
HTML5在国内外越来越受到互联网开发团队的青睐。国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得并打造的NOKIA MAP业务。国内的互联网巨头对这股大洋彼岸吹来的新web开发标准也同样感兴趣,开始着手HTML5产品的试水。网易微博iPhone平台Web App产品在2012年第一季度已经成功上线。现将此项目开发的经验教训分享给大家,希望与大家在HTML5开发环...
HTML 5 canvas —— 基本语法 简述5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。 5 提供了通过 JavaScript 绘制图形的方法...
Adobe CTO Kevin Lynch北京时间2月6日消息,网络开发者之间正在进行一项攸关网络未来的激烈辩论:是否该继续使用Adobe Flash,或改用更新的技术?这项争论已持续多年,但上周苹果公司发表的iPad(和iPhone一样)不支持Flash,再次炒热这个话题。在那之前,Adobe曾低姿态地表示,只要苹果点头,他们非常乐意为iPhone提供Flash。但Adobe技术官Kevin Lynch似乎不想再讲客套话,他在2日的一篇部落格写道,苹果不愿在其“神奇的装置”上...
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 , , , 以及 。 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则,HTML 5 改进了互操作性,并减少了开发成本。 按字母顺序排列...
一、理解颜色 我们在电脑屏幕上可以看到色彩斑斓的图像,其实这些图像都是由一个个像素点组成的。那么像素是什么?颜色又是什么呢?(如果您提出这两个问题,您一定是个热爱思考的人)一个像素其实对应着内存中的一组连续的二进制位,由于是二进制位,每个位上的取值当然只能是 0 或者 1 了!这样,这组连续的二进制位就可以由 0 ,1 排列组合出很多种情况,而每一种排列组合就决定了这个像素的一种颜色。先看看下面这幅图 声明:为...