【嘉兴东臣PHP】 HTML5画布、多媒体、表单

一、多媒体

    音频：

    src： url；要播放的音频的URL。

    autoplay：autoplay； 如果出现该属性，则音频在就绪后马上播放。

<audio controls="controls">  
    <source src="李荣浩 - 模特.mp3" type="audio/mpeg"> 
</audio>

     视频： 

     MP4 : video/mp4  ； WebM ： video/webm  ；  Ogg ： video/ogg ；

    autoplay： autoplay ； 如果出现该属性，则视频在就绪后马上播放。
    controls ： controls ； 如果出现该属性，则向用户显示控件，比如播放按钮。
    height：pixels ； 设置视频播放器的高度。   

    width ： pixels ； 设置视频播放器的宽度。

    src ：url ； 要播放的视频的URL。

<video width="480" height="320" controls="controls">  
   <source src="解救吾先生.mp4" type="video/mp4"> 
</video>

二、画布

      创建画布：

<canvas id="myCanvas" width="300" height="300" style="border:2px solid red;"></canvas

    1、画矩形：

var can = document.getElementById("");
var con = can.getContext("2d");
con.fillStyle = "" //设置颜色
con.fillRect(x,y,width,height) //设置矩形显示的尺寸

    2、画线段：

var can = document.getElementById("");
var con = can.getContext("2d");
con.moveTo(x,y); //起始坐标位置
con.lineTo(x,y); //结束坐标位置

    3、画圆：   

var can = document.getElementById("");
var con = can.getContext("2d");
con.beginPath();//开始画圆
con.arc(圆心x,圆心y，半径r，开始弧度，结束弧度)；//顺时针
con.strokeStyle = "white"; //设置空心圆颜色.
con.stroken(); //开始绘制
con.closePath();//结束画圆

    4、渐变 矩形 :

var can = document.getElementById("");
var con = can.getContext("2d");
var grd = con.createLinearGradient(开始x,开始y,结束x,结束y);//创建一个渐变矩形
grd.addColorStop( 0 ， 开始渐变颜色);
grd.addColorStop( 1， 结束渐变颜色);
        
con.fillStyle = grd; //实心矩形颜色方案为grd
con.fillRect(x,y,width,height);//这个渐变图形在画布上的坐标。

    5、渐变 圆形 :

var can = document.getElementById("");
var con = can.getContext("2d");
var grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x,结束的圆心y,结束的圆半径);
//创建一个渐变圆 。 实际上就是一个圆向另一个圆渐变！
grd.addColorStop( 0 ， 开始渐变颜色);
grd.addColorStop( 1， 结束渐变颜色);
        
con.fillStyle = grd; //实心矩形颜色方案为grd
con.fillRect(x,y,width,height);

三、HTML5 表单

<input type="number"/> //数字
<input type="url"/>  //URL 
<input type="email"/> //邮箱
<input type="color"/> //颜色拾取
<input type="date"/> //日期选择
<input type="range"/> //范围

    min 最小 , max 最大 , placeholder 默认提示 , autocomplete 自动提交

    autofocus  自动聚焦 , novalidate  提交时不要验证(默认自动验证)

四、CCS3

    CSS3 有如下特性：
          1、:in-range 范围内      2、:out-range 范围外
          3、:valid 通过               4、:invalid 没有通过
          5、:enabled  可以填写   6、:disabled 禁用元素
          7、:required 必填选项   8、:optional 可选(默认)
          9、:read-only: 只读      10、:nth-of-type 选择器
          11、[属性^=值] 选择器匹配元素属性值带指定的值开始的元素。
                     注意：从最开始匹配，从左往右
          12、[属性$=值] 选择器同理，匹配元素属性值带指定的值结尾的元素。
                     注意：从最后开始匹配，但是还是从左往右数
          13、[属性*=值] 选择器匹配元素属性值包含指定值的元素。
                     注意：只要出现匹配值，就会被匹配
          14、元素1~元素2 选择器匹配出现在 元素1 后面的 元素2。元素1 和 元素2 这两种元素必须具有相同的父元素。

总结：

      我感觉，在多行代码的程序中，很需要一种整体思路，需要把所有的变量都联系在一起去写，要不然就会不能实现最终的效果。经过我们自己写出的代码和老黄写的 一比较，很明显的就看出了，老黄的代码很精练，把所有有可能会变得一些参数都定义了变量，放在了一起，这样写，在之后如果要改变一些效果，就能很快捷的， 通过改变变量的值来实现不同的效果，这样就不用去代码里面改变一些逻辑语句。

转载于:https://my.oschina.net/u/2545457/blog/596590