一:HTML5新增的属性
HTML目录:
1、新增的标签 语义化标签 canvas(画板) svg audio(音频播放) video(视频播放) 2、新增的属性 placeholder calendar,date time email url search ContentEditable Draggable Hidden Context-menu Data-val(自定义属性) 3、api 定位(需要地理位置的功能) 重力感应(陀螺仪) request-animation-frame(动画优化) History(控制当前页面的历史记录) LocalStorage,SessionStorage(存储信息,比如:历史的最高纪录) WebSocket(在线聊天,聊天室) FileReader(文件读取,预览) WebWorker(文件的异步,提升性能,提升交互体验) Fetch(传说中的ajax)
1、input新增的属性,有些浏览器支持,有些不支持,使用在form表单里面
<form action="">
<input type="date">//显示年月日<!--chrome支持,Safari,IE不支持-->
<input type="time">//显示早中晚+几点<!--chrome支持,Safari,IE不支持-->
<input type="week">//显示年+第几周<!--chrome支持,Safari,IE不支持-->
<input type="datetime-local">//显示年月日,早中晚+几点<!--显示时间和日期,chrome支持,Safari,IE不支持-->
<input type="number">//<!--chrome支持,Safari,IE不支持-->
<input type="email">//<!--chrome,火狐支持,Safari,IE不支持-->
<input type="color">//<!--chrome支持,Safari,IE不支持-->
<input type="range" min="1" max="100">//<!--chrome,Safari支持,火狐IE不支持-->
<input type="search">//<!--chrome支持,Safari支持一点,IE不支持-->
<input type="url">//<!--chrome,火狐支持,Safari,IE不支持-->
<input type="submit">
</form>
2、contenteditable="true",可编辑的
<div contenteditable="true">aa</div>//<!-- 可编辑的,没有兼容问题,本身没有可以继承父级-->
3 、a和img标签默认是可拖拽的,其余的加draggable可拖拽,拖拽的生命周期:1、拖拽开始,拖拽进行中,拖拽结束;2、拖拽的物体,目标区域
<div class="wrap" draggable="true">//</div><!-- chrome,Safari支持,firefox不支持-->4
4、canvas
// var ctx = canvas.getContext("2d");获取画笔 // ctx.stroke();把画笔显示出来 // ctx.moveTo(100, 100);//起点 // ctx.beginPath();开始新一条路径 // ctx.lineWidth=10;线条的宽度 // ctx.closePath();//闭合 // // ctx.fill();//填充颜色
// 画矩形的方法 // ctx.rect(100,100,100,100);ctx.stroke(); // ctx.strokeRect(100,100,100,100); // ctx.fillRect(100,100,100,100);填充颜色的矩形 // ctx.moveTo(100, 100);//起点 ctx.lineTo(200, 100);ctx.lineTo(200,200);ctx.lineTo(100,200); ctx.lineTo(100,100);ctx.stroke(); // ctx.moveTo(100, 100);//起点 ctx.lineTo(200, 100);ctx.lineTo(200,200);ctx.lineTo(100,200);ctx.closePath();
列子:下落的小方块
canvas { 500px; height: 300px; border: 1px solid darkcyan; } <canvas id="can" width="500px" height="300px"></canvas> // 下落的小方块 var height = 100; var timer = setInterval(function () { ctx.clearRect(0, 0, 500, 300);//清除之前画的 ctx.fillRect(100, height, 50, 50); height+=2; }, 50);
// 画圆 (圆心(x,y),半径(r)弧度(起始弧度,结束弧度)方向(顺时针0,逆时针1)) ctx.arc(100,100,50,Math.PI*2,0); ctx.stroke(); // 吃东西形状 ctx.arc(100,100,50,0,Math.PI*1.8,0); ctx.lineTo(100,100); ctx.closePath(); ctx.fill(); ctx.stroke();
// 画圆角矩形B(x,y) C(x,y)圆角大小 ctx.moveTo(100,110);//起点 ctx.arcTo(100,200,200,200,10); ctx.arcTo(200,200,200,100,10); ctx.arcTo(200,100,100,100,10); ctx.arcTo(100,100,100,200,10); ctx.stroke();
贝塞尔曲线:
// 二次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(100, 100); ctx.quadraticCurveTo(200, 200, 300, 100); ctx.stroke(); // 三次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(100, 100); ctx.bezierCurveTo(200, 200, 300, 100,400,200); ctx.stroke(); // 一个小波浪图 var width = 500; var height = 300; var offset = 0; var num=0; var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); setInterval(function () { ctx.clearRect(0, 0, 500, 300); ctx.beginPath(); ctx.moveTo(0 + offset - 500, height / 2); ctx.quadraticCurveTo(width / 4 + offset - 500, height / 2 + Math.sin(num) * 120, width / 2 + offset - 500, height / 2); ctx.quadraticCurveTo(width / 4 * 3 + offset - 500, height / 2 - Math.sin(num) * 120, width + offset - 500, height / 2); ctx.moveTo(0 + offset, height / 2); ctx.quadraticCurveTo(width / 4 + offset, height / 2 + Math.sin(num) * 120, width / 2 + offset, height / 2); ctx.quadraticCurveTo(width / 4 * 3 + offset, height / 2 - Math.sin(num) * 120, width + offset, height / 2); offset += 2; offset %= 500; ctx.stroke(); num+=0.01; }, 20);
// 直线旋转,根据画布的原点 ctx.rotate(Math.PI / 6);//根据画布的原点旋转 ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.stroke(); // 根据坐标轴旋转 ctx.translate(100, 100);//移动坐标系 ctx.moveTo(0, 0); ctx.rotate(Math.PI / 6);//根据画布的原点旋转 ctx.lineTo(100, 0); ctx.stroke(); // 矩形缩放 ctx.scale(2,2);//缩放x,y ctx.fillRect(100, 100,100,100); ctx.stroke();
这个translate和scale是设置所有的图形,如果不想其他图形受到影响就要save保存一下原始数据,然后restore还原
var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.save();// 存储当前的平移,旋转,缩放数据 ctx.translate(100,100);//translate和rotate是全局的,只要第一个设置了translate和rotate,画第二个矩形的时候会跟着旋转的路劲画 ctx.rotate(Math.PI / 4); ctx.strokeRect(0, 0, 100, 50); ctx.beginPath(); ctx.restore();//恢复所有的平移和旋转,第二个矩形不是按原来的位置 ctx.strokeRect(200, 0, 100, 50);
颜色填充:
var canvas = document.getElementById('can'); var ctx = canvas.getContext("2d"); // 第一种背景颜色填充 ctx.fillStyle = "blue"; ctx.fillRect(100, 100, 100, 50); ctx.stroke(); // 第二种用图片填充,图片和纹理的填充是已原点填充的,所以要改变坐标系位置 var img = new Image(); img.src = './img/1.png'; img.onload = function () { ctx.beginPath(); ctx.translate(100,100); var bg = ctx.createPattern(img, 'no-repeat');//图片填充要创建纹理 ctx.fillStyle = bg; ctx.fillRect(0, 0, 300, 100); ctx.stroke(); } // 第三种渐变颜色填充,已原点填充的,所以要改变坐标系位置 ctx.beginPath(); var bg = ctx.createLinearGradient(0,0,200,0);//渐变颜色填充,x0,y0,x1,y1 bg.addColorStop(0,'white');//起始颜色 bg.addColorStop(1,'black');//终止颜色 ctx.fillStyle = bg; ctx.translate(100,100); ctx.fillRect(0,0, 300, 100); ctx.stroke(); // 第四种:辐射渐变 ctx.beginPath(); var bg = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);//渐变颜色填充,x1,y1,半径,x2,y2,半径 bg.addColorStop(0, 'red'); bg.addColorStop(0.5, 'blue'); bg.addColorStop(1, 'green'); ctx.fillStyle = bg; ctx.fillRect(0, 0, 200, 200); // canvas阴影 ctx.beginPath(); ctx.shadowColor='green';//阴影颜色 ctx.shadowBlur=100;//阴影大小 ctx.shadowOffsetX=15; ctx.shadowOffsetY=15; ctx.fillRect(100, 100, 100, 100);
在canvas里面绘制文字
ctx.font = '30px Georgia'; ctx.fillText("我爱你", 100, 100);//细字体,实心字体 ctx.strokeText("我爱你", 150, 150);//租字体,空心字体
线端样式:给线条的两端加修饰
ctx.beginPath(); ctx.moveTo(50,50); ctx.lineCap='round';//给线条两端添加样式,square正方形,round椭圆,butt原来的样子 ctx.lineTo(150,50); ctx.lineWidth=10; ctx.stroke();
ctx.beginPath(); ctx.moveTo(50,50); ctx.lineJoin='round';//给两个线条的相交点添加样式,round圆角,bevel相交两个点砍掉,miter尖锐的
ctx.miterLimit=5;//限制尖锐的长度 ctx.lineTo(150,50); ctx.lineTo(150,150); ctx.lineWidth=10; ctx.stroke();
5、svg:放大,不会失真,适合大面积的贴图,通常动画较少或者简单,标签和css画。canvas:适合小面积的绘图,适合动画
5.1、画线条
.line1 { /* 显示线条 */ stroke: darkcyan; stroke- 3px; } .line2 { stroke: darkblue; stroke- 2px; } <svg width="500px" height="300px" style="border:1px solid blue"> <line x1="100" y1="100" x2="200" y2="100" class="line1"></line> <line x1="200" y1="100" x2="200" y2="200" class="line2"></line> </svg>
5.2、画矩形
<rect height="50" width="100" x="0" y="0" rx="10" ry="10"></rect> //rx是x方向的圆角,ry是y方向的圆<circle r="10" cx="20" cy="20"></circle>画圆(半径,x轴的圆心。y轴的圆心)<ellipse rx="100" ry="30" cx="200" cy="200"></ellipse>画椭圆(x半径,y半径,x位置,y位置)
<polyline points="0 0,50 50,50 100,100 100,50 100"></polyline>画折线(起点,拐点,拐点...,终点),每一个点用空格隔开,点和点用逗号隔开 //样式 polyline{ /* 不默认填充,添加自己想要的边框 */ fill:transparent; stroke: darkblue; stroke- 3px;
fill-opacity:0.2;//填充半透明
stroke-opacity:0.1;//边框半透明
stroke-linecap: round;
stroke-linejoin: bevel;
}
<polygon points="0 0,50 50,50 100,100 100,100 50"></polygon>//polyline和polygon填充的时候是一样的,不填充的时候polyline不会闭合,polygon会闭合
<text x="100" y="100">hello</text>//文本