请使用firefox,chrome等最新浏览器浏览本站。

canvas 时钟

查看demo canvas时钟代码: var canvas = document.getElementById('clock'); var clock = canvas.getContext('2d'); function drowClock() { //清除画布 clock.clearRect(0, 0, 300, 300); v……继续阅读 »

阿豹 4年前 (2015-03-04) 330浏览 0评论 1个赞

文件和二进制数据的操作

Blob对象 Blob(Binary Large Object)对象代表了一段二进制数据. 生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对现有的Blob对象使用slice方法切出一部分。 (1)Blob构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型,这两个参数都不是必需的。 var htmlParts……继续阅读 »

阿豹 4年前 (2015-03-03) 372浏览 0评论 0个赞

HTML5 Web Notifications API

概述 Notifications API用于在用户的桌面(而不是网页上)显示通知信息,桌面电脑和手机都适用,比如通知用户收到了一封Email。具体的实现形式由浏览器自行部署,对于手机来说,一般显示在顶部的通知栏。 如果网页代码调用这个API,浏览器会询问用户是否接受。只有在用户同意的情况下,通知信息才会显示。 查看浏览器兼容性 下面的代码用于检查浏览器是否支……继续阅读 »

阿豹 4年前 (2015-03-03) 290浏览 0评论 0个赞

HTML5 拖放操作

html5 Drag and Drop api允许对元素进行拖放。 查看浏览器兼容性 draggable属性 如果网页元素的draggable属性为true,这个元素就是可以拖动的。 <div draggable=”true”>Draggable Div</div> 在大多数浏览器中,a元素和img元素默认……继续阅读 »

阿豹 4年前 (2015-03-02) 275浏览 0评论 1个赞

HTML5 FileReader的使用

本文来自file api FileReader对象用于读取文件,即把文件内容读入内存。它的参数是File对象或Blob对象。 检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e……继续阅读 »

阿豹 4年前 (2015-02-27) 243浏览 0评论 0个赞

Canvas API——像素处理

通过getImageData方法和putImageData方法,可以处理每个像素,进而操作图像内容。 var pixels= context.getImageData(0, 0, canvas.width, canvas.height); 灰度效果 灰度图(grayscale)就是取红、绿、蓝三个像素值的算术平均值,这实际上将图像转成了黑白形式。假定d[i]……继续阅读 »

阿豹 4年前 (2015-02-26) 262浏览 0评论 0个赞

Canvas API——save,restore

save()和restore()方法是绘制复杂图形必不可少的方法.它们分别是用来保存和恢复 canvas 状态的,都没有参数。 Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来。这种状态包括:当前应用的变形(即移动,旋转和缩放), strokeStyle, fillStyle, globalAl……继续阅读 »

阿豹 4年前 (2015-02-26) 229浏览 0评论 0个赞

Canvas API——图像篇

drawImage方法 drawImage() 方法在画布上绘制图像、画布或视频。 在画布上定位图像: ctx.drawImage(img,x,y); 在画布上定位图像,并规定图像的宽度和高度: ctx.drawImage(img,x,y,width,height); 剪切图像,并在画布上定位被剪切的部分: ctx.drawImage(img,sx,sy,s……继续阅读 »

阿豹 4年前 (2015-02-26) 234浏览 0评论 0个赞