HTML5的Canvas和SVG

H5中新增了一些属性和语义化标签以及一些API等等；

在日常运用中，H5一般用于移动端的开发

新增的属性有：placeholder  ---input中提示的内容

input  type :calender  date time  week  email  url  search  number....

contenteditable   是否允许编辑

droggable  可拖拽的

hidden   是否隐藏

context-menu  了解

data-val  自定义属性

新增的语义化标签：

canvas   画板   位图    

svg  矢量图

Audio   音频

Video  视频

语义化的好处 ---对seo友好   seo指的是搜索引擎优化

<ul><li></li></ul>

<p></p>

<h2></h2>

<header>位于网页顶部的标题，logo</header>

<footer>位于网页底部的友情链接，版权声明，联系方式</footer>

<nav>导航条</nav>

<section>具体的内容</section>

<article>文章</article>

<aside>内容的侧边栏</aside>

<figure>独立的单元，例如某个有图片与内容的新闻块</figure> 

表单标签

表单元素：

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<progress value="0.5"></progress>
<meter></meter>

新增的API：

video标签的属性：

autoplay  自动播放

controls  是否显示播放控件

currentTime  播放到当前时间

duration  影片的总时长

ended  是否循环播放

paused  当前是否处于暂停状态

play() 开始播放

pause() 暂停播放

矩形
ctx.strokeRect() 描边
ctx.fillRect() 填充
ctx.clearRect() 清除画布

文本
ctx.strokeText() 描边
ctx.fillRect() 填充
ctx.measureText(txt).width

ctx.beginPath() 开始路径
ctx.moveTo() 起点路径
ctx.lineTo() 经过路径
ctx.stroke() 描边
ctx.fill() 填充
ctx.clip() 裁剪
ctx.arc(x,y,r,o,Math.PI/*2) 绘制圆形

图像
ctx.drawImage(imgs,x,y,width,height)
ctx.rotate(deg); //画笔旋转 deg-->角度
ctx.translate(x,y); //平移---改变原点 的坐标
ctx.scale(x,y); //画笔 缩放
ctx.save(); // 保存绘图上下文 ，当前的变形数据
ctx.restore(); //恢复最近一次保存的画笔的变形状态

椭圆
<ellipse cx="200" cy="150" rx="200" ry="100" fill="#0f0" fill-opacity="0.5"</ellipse>

直线
<line x1="100" y1="100" x2="600" y2="400" stroke="#0f0" stroke-width="10"></line>

多边形
<polyline points="50,100 100,200 200,300 250,200" stroke="#000" fill-opacity="0"></polyline>

文本
<text x="0" y="0" alignment-baseline="before-edge" font-size="30>你好明天 </text>

表单的验证 ：

<input type="text" name="uname" required maxlength="9" minlength="3"  step="1">

required是boolean属性  必须要有，最大长度9，最小长度3

<input type="tel" name="utel" pattern="1[3578]\d{9}">

pattern 正则可以省略  ^  $

<input type="image" src="imgs/login.png" alt="Submit" width="100" height="100">

image可以作为提交按钮来使用

 

 

 

转载于:https://www.cnblogs.com/hyh888/p/11577516.html