概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： 1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4.a为椭圆横半轴长，5.b为椭圆纵半轴长。 参数方程法 该方法利用椭圆的参数方程来绘制椭圆代码如下://-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、//纵...
在现在的前端页面中，尤其是移动端，经常会需要将或者是模块悬浮出来，跟随页面的滑动保持定位在页面的最上方或者是最下方，如下图所示。“回复主题”模块，就是跟随页面的浮动一直悬浮在页面的最下方，代码结构如下。 代码如下:... 回复主题... 实现这样的功能当然是利用position:fixed。但是，使用position:fixed有一个bug，以悬浮在最下方为例（悬浮同理），当页面滑到最下方的时候，由于是fixed定位，脱离了正常文档流，导致...
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为video使用的比较多 在html5中，全屏方法可以适用于很多html 元素，不仅仅是video代码如下:全屏问题*{ padding: 0px; margin: 0px;} body div.videobox{ width: 400px; height: 320px; margin: 100px auto; background-color:#000;} body div.videobox video.video{width: 100%; height: 100%;} :-webkit-full-screen { } :-moz-full-screen { } :...
HTML5, CSS3 以及其他相关技术例如 Canvas、WebSocket 等等将 Web 应用开发带到了一个新的高度。该技术通过组合 HTML、CSS 和 JavaScript 可以开发出桌面应用具有的效果。尽管 HTML5 承诺很多，但现实中对 HTML5 支持的浏览器以及 HTML5 标准本身的完善程度都还没有到一个很成熟的程度。现在完全不担心浏览器支持是不现实的，还需要时间，因此当我们决定要采用 HTML5 技术开发 Web 应用的时候，我们需要对浏览器所支持的特性进行检...
☆ canvas.getContext(2d) 不可在convas中直接绘图，必须用该方法获得其二维空间绘图上 下文。 ☆ context.beginPath() 表示开始新的路径绘制。 ☆ context.isPointInPath(x, y) 判断某个点是否在路径上。在坐标系被转换后该方法不适用。 ☆ context.moveTo(x,y) 相当于将画笔从画板提起，笔尖离开画板，然后再将笔尖定位在 (x,y)坐标处，在这个新的位置开始新的绘制。 ☆ context.lineTo(x, y) 相当于画笔笔尖不离开画板，画笔笔尖...
Canvas2D自带的曲线方法 最近在研究3D柔体的计算，所以在狂补一些知识。经常会涉及到一些数值分析方面的东西，主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的，使用的是二次和三次的贝兹曲线。其实我也一直没用它的过这个方法，现在就来试试吧～ 这篇只是说说简单的曲线绘制，咱就不说一大堆复杂的原理了。况且贝兹曲线这东西的原理本身很简单，看看维基百科就能明白。其实很多绘图工具中的简单曲线绘...
大文件分块 一般常用的web服务器都有对向服务器端提交数据有大小限制。超过一定大小文件服务器端将返回拒绝信息。当然，web服务器都提供了配置文件可能修改限制的大小。针对iis实现大文件的上传网上也有一些通过修改web服务器限制文件大小来实现。不过这样对web服务器的安全带了问题。攻击者很容易发一个大数据包，将你的web服务器直接给拖死。 现在针对大文件上传主流的实现方式，通过将大文件分块。比如针对一个100M文件，按2M拆...
1.跨文档消息通信跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。它把postMessage API定义为发送消息的标准方式。利用postMessage发送消息非常简单，代码如下所示：chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');接收消息时仅需在页面种增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。消息事件是一个拥有data(数据)和origin(源)属...
HTML5 引入了两种机制，类似于 HTTP 的会话 cookies，用于在客户端存储结构化数据以及克服以下缺点。 每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 Web 应用程序。 每个 HTTP 请求中都包含 Cookies，从而导致发送未加密的数据到互联网上。 Cookies 只能存储有限的 4KB 数据，不足以存储所需的数据。这两种存储方式是 session storage 和 local storage，它们将用于处理不同的情况。 几乎所有最新版的浏览器都...
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。 1、声明文档使用的字符编码XML/HTML Code复制内容到剪贴板meta charset='utf-8'> 2、声明文档的兼容模式XML/HTML Code复制内容到剪贴板meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高...
canvas 元素使用 JavaScript 在网页上绘制图像，本身是没有绘图能力。 canvas 是一个矩形区域，可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 下面来做几个示例： 1、填充画布JavaScript Code复制内容到剪贴板"myCanvas" width="200" height="100" style="border:1px solid red;"> "text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); ...
指定颜色 黑色是Canvas绘制的默认色彩，要想换一种颜色的话，就得在实际画之前指定颜色。JavaScript Code复制内容到剪贴板ctx.strokeStyle = color 指定绘制线的颜色：JavaScript Code复制内容到剪贴板ctx.fillStyle = color 指定填充的颜色：来看看实际的例子： JavaScriptJavaScript Code复制内容到剪贴板onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); ...
在介绍矩阵变换transform()前，我们来说一说什么是变换矩阵。 以上是Canvas中transform()方法所对应的变换矩阵。而此方法正是传入图中所示的六个参数，具体为context.transform(a,b,c,d,e,f)。 各参数意义对应如下表： 参数意义a水平缩放（1）b水平倾斜（0）c垂直倾斜（0）d垂直缩放（1）e水平位移（0）f垂直位移（0） 当我们把对应的0或1代入进矩阵，可以发现这是一个单位矩阵（水平和垂直缩放默认值是1，代表缩放1倍，即不缩放）...
今天和大家分享一个以SVG图像为主的loading加载动画，现在移动端网页使用比较多，若还用GIF做loading图片的话，可能会影响图像的质量，所以使用SVG是一个不错的方式。 这次展示的代码由 Aurer 编写，前端人员只需要直接复制想要的SVG代码就能直接使用，而且可以改变颜色。当然，对于好学的同学，也可以研究下这个代码的编写原理。 使用教程 接下来设计达人网小编为大家讲解这个使用方法，其实是相当简单的。 STEP 1: 复制你想要的S...
HTML5 特性，包括原生音频和视频支持而无需 Flash。 HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。 嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式：XML/HTML Code复制内容到剪贴板video src="foo.mp4" width="300" height="200" controls> Your browser does not support the video> element. video> 目前的 HTML5 规范...