zoukankan      html  css  js  c++  java
  • 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可以作为提交按钮来使用

     

  • 相关阅读:
    HDU 4396
    Vijos1603 迷宫
    BZOJ1087 [SCOI2005] 互不侵犯King
    BZOJ2208 [JSOI2010] 连通数
    BZOJ1051 [HAOI2006] 受欢迎的牛
    BZOJ2751 [HAOI2012] 容易题(easy)
    BZOJ1015 [JSOI2008] 星球大战starwar
    BZOJ1012 [JSOI2008] 最大数maxnumber
    BZOJ1050 [HAOI2006] 旅行comf
    BZOJ2761 [JLOI2011] 不重复数字
  • 原文地址:https://www.cnblogs.com/hyh888/p/11577516.html
Copyright © 2011-2022 走看看