1. Canvas元素以下html代码定义了一个canvas元素。<!DOCTYPE html> <html> <head> <title>Canvas快速入门</title> <meta charset="utf-8"/> </head> <body> <p> <canvas id="mainCanvas" width="640" height="480"></canvas> </p> </body> </html>通过以下Javascript语句访问canvas元素：//DOM写法 window.onload = function () { var canvas = document.getElementById("mainCanvas"); var context = canvas.get...
在《小强的HTML5移动开发之路（33）——jqMobi基础》中我们了解了什么是jqMobi，并从官方下载了jqMobi开发包，下载后解压目录如下：拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。如果需要也可以拷贝index.html，然后自己修改,比如上面我的index01.html和index02.html接下来引入css与js文件<link href="css/af.ui.css" rel="stylesheet" type="text/css"/> <link href="css/icons.css" rel="style...
超文本标记语言，即我们常说的HTML，是一种用来制作网页的标准标记语言，它是由一系列的HTML标签构成。HTML标签大多都是成对出现的，比如< h1> < /h1 > ，分别是开始标记和结束标记。但也有一些标签是没有内容的，也就没有结束标记，比如< img> 。这里为大家列出15个关于HTML的常见问题，供学习和参考。 1.HTML代表什么？答：HyperText Markup Language，超文本标记语言。 2.HTML用来做什么？答：HTML是用来制作网页的标准标记语言...
我也想学，我也想知道。到底怎么学啊回复内容： 推荐这个网站： http://www.html5rocks.com 有入门的介绍，有系统的教程，有各类案例，还可以在playground里进行练习。推荐一个很好的学些网站：http://www.w3school.com.cn/html5/index.asp，上面有关于HTML5的入门级教程，如果想系统深入的学习的话，最好的办法是看官方的文档和Demo，书籍的话可以采用《Pro HTML5 Programming》和《HTML5_up_and_running》，最好的办法是多编程...
我现在刚通过学校一个公众号技术部门的面试，估计以后的前端设计都会交给我，但我现在只是了解一些基础知识，级联样式表和表格什么的，连jQuery和响应式网页都没会，公众号的服务包括查询课表或者四六级成绩，一些比赛活动的投票，这些以后都要我参与进去，所以我应该要优先学习和了解哪些知识回复内容： @冯菲 的升级版：http://html5ify.com/fks/fks_chart/对应的github库项目：JacksonTian/fks · GitHub1. 我猜你肯定没看过这个...
信息介绍：本人非211硕士，6月份即将毕业，本科轻化工程专业，硕士企业管理专业，提问时间为2016.04.05，也是从今天开始正式进入零基础自学编程阶段。缘由：自从去年9月份在某公司从事“产品经理”一职以来，内心就一直有想跨行当“攻城师”的冲动，由于工作和毕业论文的原因，迟迟未下决心，但始终都在惦记着这件事，间隙时也会向同事、同学打听该如何入门（是C++、Java还是其他、自学或培训、看书还是视频），也会在知乎上对相关...
Web技术的发展速度太快了，如果你不与时俱进，就会被淘汰。因此，为了应对即将到来的HTML 5，本文总结了11个HTML 5的初级技巧，希望能对你进一步学习好HTML 5会有所帮助。 1. 新的Doctype声明 XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。 HTML 5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。 HTML 5的简短的DOCTYPE声明是让Firefox...
滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。滤镜用filter元素定义：需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行一个基本的图形操作，并产生图形输出。大多数的原子...
SVG支持的蒙板 SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了，这里都叫做蒙板吧。 SVG支持的蒙板类型： 1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。 2. 遮罩/蒙板(mask) 蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象...
前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对SVG的文档结构中剩下的相关元素简单总结一下，然后继续向前领略SVG的其他特性。 SVG文档的元素基本可以分为以下几类： •动画元素：animate,animateColor,animateMotion,animateTransform,set； •解释元素：desc,metadata,title； •图形元素：circle,ellipse,line,path,polygon,polyline,rect； •结构元素：defs,g,svg,symbol,use； •渐...
SVG中渲染文本 SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。此外，可以使用 tspan 元素可以将文本元素分成几部分，允许每部分有各自的样式...
SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式：1. 颜色名字： 直接使用颜色名字red, blue, black...2. rgba/rgb值： 这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。3. 十六进制值： 用十六进制定义的颜色，例如#ffffff。4. 渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，环形渐变。如下图所示：5. 图案填充：使用自定义...
到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格： CanvasSVG基于像素（动态 .png）基于形状单个 HTML 元素多个图形元素，这些元素成为 DOM 的一部分仅通过脚本修改通过脚本和 CSS 修改事件模型/用户交互颗粒化 (x,y)事件模型/用户交互抽象化 (re...
基本形状SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：代码如下: <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transpare...
交互性 SVG拥有良好的用户交互性，例如： 1. SVG能响应大部分的DOM2事件。 2. SVG能通过cursor良好的捕捉用户鼠标的移动。 3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。 4. 用户可以很方便的把动画和事件结合起来，完成一些复杂的效果。 通过给SVG元素挂接事件，我们可以使用脚本语言方便的完成一些交互任务。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseu...