() { (e) { ).files; ) { .test(fileList[i].type))) { ); 13 } 14 else { ); 16 } 17 } 18 }); 19 });

实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery）

) { ); 9 } showDataByURL() { ]; 13 if (resultFile) { FileReader(); 15 reader.readAsDataURL(resultFile); (e) { .result; ; 19 }; 20 } 21 } showDataByBinaryString() { ]; 25 if (resultFile) { FileReader(); reader.readAsBinaryString(resultFile); (e) { .result; urlData; 32 }; 33 } 34 } showDataByText() { ]; 38 if (resultFile) { FileReader(); ); (e) { .result; urlData; 44 }; 45 } 46 }

获取canvas元素 var canvasDom = document.getElementById("demoCanvas");

获取上下文 var context = canvasDom.getContext('2d');

画只有线条的矩形框：

1 context.strokeStyle = "red"; 2 context.strokeRect(10, 10, 190, 100);

画填充矩形：

1 context.fillStyle = "blue"; 2 context.fillRect(110,110,100,100);

画线条：

context.moveTo(20, 20); context.lineTo(200, 200); context.lineTo(400, 20); context.lineWidth = 2.0; context.strokeStyle = "#CC0000"; context.stroke(); // 进行线的着色，这时整条线才变得可见

画文本：

fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

context.font = "Bold 50px Arial";// 设置字体 context.textAlign = "left";// 设置对齐方式 context.fillStyle = "#005600";// 设置填充颜色 context.fillText("老马!", 10, 50);// 设置字体内容，以及在画布上的位置 context.strokeText("blog.itjeek.com!", 10, 100);// 绘制空心字

画圆：

arc（x,y,radius,startAngle,endAngle,anticlockwise）方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

context.arc(60, 60, 50, 0, Math.PI * 2, context.lineWidth = 2.0;context.strokeStyle = "#000";context.stroke();//绘制空心的，当然如果使用fill那就是填充了。

将图片放上画布：

image.src = "Images/a.png";context.drawImage(image, 100, 100);//将图片放上画布，设置坐标

还有渐变、阴影等，待查。

永久性的本地存储：localStorage：

1

会话级别的本地存储：sessionStorage(它跟浏览器当前会话相关，当会话结束后，数据会自动清除):

基本步骤为：

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。

1 var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function(){});

几个参数意义分别是：

transaction方法用于控制事务处理，执行提交操作或回滚操作。executeSql方法执行查询

});

参数说明：

实例：用“审查元素”的“resource”查看