下面的表格列出了可插入 HTML 5 元素中以定义事件行为的标准事件属性。Window 事件属性 - Window Event Attributes 表单事件 - Form Events 键盘事件 - Keybord Events 鼠标事件 - Mouse Events 媒介事件 - Media EventsWindow 事件属性window 对象触发的事件。适用于属性值描述onafterprintscript在打印文档之后运行脚本onbeforeprintscript在文档打印之前运行脚本onbeforeonloadscript在文档加载之前运行脚本onblurscript当窗口失...
HTML5标签嵌套规则详解【必看】_html5教程技巧前面的话 在html5中，元素的子元素可以是块级元素，这在以前是被认为不符合规则的。本文将详细介绍html5的标签嵌套规则 分类 html5出现之前，经常把元素按照block、inline、inline-block来区分。在html5中，元素不再按照display属性来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow conte...
圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。JavaScript Code复制内容到剪贴板"zh"> "UTF-8"> 圆角矩形 body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } ...
用html5绘制折线图的实例代码_html5教程技巧<html> <canvas id="a_canvas" width="1000" height="700">canvas> <script> (function (){ window.addEventListener("load", function(){ var data = [100,-1000,0,700]; // 获取上下文 var a_canvas = document.getElementById(a_canvas); var context = a_canvas.getContext("2d"); // 绘制背景 var gradient = context.createLinearGradient(0,0,0,...
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。 1、实现原理 假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度(width) 设置为500%，然后将5个页面装入容器中，并让这5个页面平分整个容器，最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面。<p id="viewport" clas...
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？ 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域是里面，哪块区域是外面。接下来，我们具体来看下什么是非零环绕原则。 首先，我们得给图形确定一条路径，只要“一笔画”并且“不走重复路线”就可以了。如图，标出的是其中的一种路径方向。我们先假定路径的正方向为...
本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全： 下图为裁剪后的效果：html部分：XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> title>上传头像title> meta name="renderer" content="webkit"> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body> div id="imgCrop"...
FormData是HTML5标准制定的一个新的封装对象，有了FormData对象，可以方便地通过javascript创建表单数据，直接以ajax发送到服务器中。目前浏览器的支持情况为： 以上就是深入理解HTML的FormData对象_html5教程技巧的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
先看看最简单的效果图：代码如下：JavaScript Code复制内容到剪贴板var canvas = document.getElementById('my'), ctx = canvas.getContext('2d'); setInterval(function(){ ctx.clearRect(0,0,400,400); ctx.save(); ctx.translate(200,200); var ci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0; ctx.beginPath(); for(var i = ci *...
缩放变换scale(sx,sy)传入两个参数，分别是水平方向和垂直方向上对象的缩放倍数。例如context.scale(2,2)就是对图像放大两倍。其实，看上去简单，实际用起来还是有一些问题的。我们来看一段代码：JavaScript Code复制内容到剪贴板"zh"> "UTF-8"> 缩放变换 body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px aut...
目前而言firefox，opera,chrome等主流浏览器都已经支持border-radius属性，唯独IE8以及之前。 解决办法就是在用的border-radius属性的后面加上:behavior: url(ie-css3.htc);XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> title>border-radius兼容IEtitle> style> .d1{ width: 5em; height:5em; background: #e4393c; ...
创建阴影效果需要操作以下4个属性：1.context.shadowColor：阴影颜色。2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写...
二话不说，先上效果图以及源代码~HTML代码 XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="chp1_guess_the_letter.js?1.1.5">script> <script type="text/javascript" src="modernizr.custom.99886.js?1.1.5">script> head> <body> <canvas id="canvas_guess_the_letter" width="500" height="300"> 你的浏览器不支持HTML5 Canv...
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所...
API简介今天我们开始征战一个全新的内容——HTML5 Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不是很有意思？ 好了，先预告一下Canvas 文本API有哪些。 属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对其方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText()在画布上绘制“被填充的”文本strokeTex...