01-HTML5基础

了解HTML5

 ☞HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！
   例如： video 标签和 audio 及 canvas 标记
 
 ☞ 新特性：
      1. 取消了过时的显示效果标记  <font></font> 和 <center></center> ...
      2. 新表单元素引入
      3. 新语义标签的引入  
      4. canvas标签（图形设计）
      5. 本地数据库（本地存储）
      6. 一些API
 ☞ 好处：
      1. 跨平台
          例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。

 ☞ 缺点：
      1. pc端浏览器支持不是特别友好，造成用户体验不佳

新语义标签

网页布局结构标签及兼容处理

  <header></header>
  <footer></footer>
  <article></article>
  <aside></aside>
  <nav></nav>
  <section></section>
  ....
  http://www.w3school.com.cn/html/html5_semantic_elements.asp

多媒体标签及属性介绍

 ☞ <video></video> 视频
      属性：controls 显示控制栏
      属性：autoplay 自动播放  
     属性：loop  设置循环播放
 ☞ <audio></audio>  音频
      属性：controls 显示控制栏
      属性：autoplay 自动播放  
     属性：loop  设置循环播放
 ☞ video标签支持的格式    http://www.w3school.com.cn/html5/html_5_video.asp
 ☞ 多媒体标签在网页中的兼容效果方式

     <video>
        <source src="code/多媒体标签/trailer.mp4">
        <source src="trailer.ogg">
        <source src="trailer.WebM">
    </video>

新表单元素及属性

智能表单控件

 
<input  type="email">
 email: 输入合法的邮箱地址
 url：  输入合法的网址
 number： 只能输入数字
 range： 滑块
 color： 拾色器
 date： 显示日期
 month： 显示月份
 week ： 显示第几周
 time：  显示时间

表单属性

 ◆form属性：   
    autocomplete=on | off          自动完成
    novalidate=true | false        是否关闭校验

  ◆ input属性：
    *autofocus  ： 自动获取焦点
    form：
        <form action="test.php" method="get"  id="test">
            <input type="submit" name="">
         </form>
        <!-- 注意:写在外面的input标签的form属性里面的"值"要与上面的form的id保持一致,才可以提交 -->
        <input type="text" name="uname" value="用户名" form="test">
    list：
        <!-- 注意:list的"值"要与datalist里面的id保持一致 -->
       <input type="text" list="abc"/>
         <datalist id="abc">
            <option value="123">12312</option>
            <option value="123">12312</option>
            <option value="123">12312</option>
            <option value="123">12312</option>
        </datalist>
    multiple：    实现多选效果
    *placeholder ： 占位符  （提示信息）
    *required：    必填项

作业：
    ◆自己解决required自定义提示信息
    ◆预习和复习


留下的疑问：
    ◆ 如何修改表单控件中的默认提示信息 
         1. 表单验证触发oninvalid事件
         2. 通过setCustomValidity方法设置修改内容

HTMl5中的API

获取页面元素及类名操作和自定义属性

  ☞ document.querySelector("选择器")；
//案例:=======================================================
    document.querySelector('ul > li ~ span ');
    选择ul下面的li的兄弟span元素
//备注：
    选择器： 可以是css中的任意一种选择器
    （づ￣3￣）づ╭❤～ 过该选择器只能选中第一个元素。
         

         
  ☞ document.querySelectorAll("选择器");
//案例:=============================================================
    document.querySelector('ul > li ~ span ');
    选择ul的子元素li,li的所有兄弟元素span元素
//备注：
    与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素
      

    
  ☞ Dom.classList.add("类名"): 给当前dom元素添加类样式
        案例:document.querySelector('.one').classList.add('two');
        //注意: ".one"是选择器, "two"是class样式

  ☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式

  ☞ classList.contains("类名"); 检测是否包含类样式

  ☞ classList.toggle("active");  切换类样式（有就删除，没有就添加）




  ☞ 自定义属性           （小案例分析体验自定义属性）
  
     data-自定义属性名
//备注==================================================================================
    在标签中，以data-自定义名称  
//案例 
    <div class="one" style="color:red;" data-two-a="哈哈哈"></div>
//注意
    data-two中 two-a才是自定义属性



     1. 获取自定义属性   Dom.dataset   返回的是一个对象
        Dom.dataset.属性名  或者  Dom.dataset[属性名]
//案例:====================================================================================
    var text = document.querySelector('.one').dataset['twoA'];
    console.log(text);
//注意： 
    属性名是不包含data-
    在div标签中"two-a" 在获取中会转化为驼峰命名法 "twoA"
    要配合上面的html代码使用



     2. 设置自定义属性
        Dom.dataset.自定义属性名=值  或者  Dom.dataset[自定义属性名]=值；
//案例:====================================================================================
    var texa = document.querySelector('.fow');
    texa.dataset['aneA'] = '嘻嘻嘻';
    console.log(texa.dataset.aneA);
//注意:
    在添加自定义属性的时候属性名字不能为"ane-a",必须按照驼峰命名法来命名.如"aneA";
    在添加驼峰命名法"aneA"后,标签里面会添加一个 'data-ane-a="xxx" '的自定义属性
    要配合上面的html代码使用

文件读取

 ☞  FileReader
    FileReader           接口有3个用来读取文件方法返回结果在result中
    readAsBinaryString   ---将文件读取为二进制编码
    readAsText          ---将文件读取为文本
    readAsDataURL       ---将文件读取为DataURL

 ☞  FileReader      提供的事件模型
    onabort         中断时触发
    onerror         出错时触发
    onload          文件读取成功完成时触发
    onloadend       读取完成触发，无论成功或失败
    onloadstart     读取开始时触发
    onprogress      读取中

 ☞ 分析读取图片小案例

//案例:====================================================================
*************html:------------------------------------------------------------
<input class="readInput" type="file" value="选择文件" /><br>
<img class="displayImg" src="http://iph.href.lu/800x600" alt="" width="800px" height="600px">
<p class="displayImg"></p>

*************js:--------------------------------------------------------------
var read = document.querySelector('.readInput');
//绑定上传事件
read.onchange = function () {
    // 获取文件
    var file = this.files['0'];

    // 创建读取器
    var reader = new FileReader();            

    // 开始读取 注意:选择读取类型,这里是读取文件的DataURL
    reader.readAsDataURL(file);

    //读取结果(注意读取结果是异步的)  读取的结果会放在 FileReader.result 属性中
    reader.onload = function () {
        // 显示图片与文件名
        document.querySelectorAll('.displayImg')['0'].src = this.result;
        document.querySelectorAll('.displayImg')['1'].innerHTML = read.files[0].name;
    };
};

获取网络状态

  ☞ 获取当前网络状态
         window.navigator.onLine 返回一个布尔值
//案例============================================================
var tes = window.navigator.onLine;
if (tes) {
    alert("联网");
}else{
    alert('断网');
};
//注意
window.navigator.onLine是判断当前的网络状态



  ☞ 网络状态事件
        1. window.ononline
        2. window.onoffline
//案例============================================================
window.ononline = function(){
    alert('联网');
};
window.onoffline = function(){
    alert('断网');
};
//注意
 window.ononline与window.onoffline是监听网络状态

获取地理定位

  ☞  获取一次当前位置
    window.navigator.geolocation.getCurrentPosition(success,error);
    1. coords.latitude   维度
    2. coords.longitude   经度
    
  ☞  实时获取当前位置
    window.navigator.geolocation.watchPosition(success,error);

  ☞ 分析地理定位小案例

// 案例:===================================================================
    window.navigator.geolocation.getCurrentPosition(success, error);
    // 获取成功执行回调函数
    function success(msg) {
        console.log(msg);
        var latitude = msg.coords.latitude;     //维度
        var longitude = msg.coords.longitude;   //经度
        var accuracy = msg.coords.accuracy;     //位置精度  
        consoel.log(latitude, longitude, accuracy);
    };
    //获取失败执行回调函数
    function error(msg) {
        console.log(msg);
    };
//注意:
    在谷歌浏览器上因为获取的是谷歌地图所以会有问题

本地存储

   ☞发展：
      随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。 

    ☞  localStorage：
        1. 永久生效
        2. 多窗口共享
        3. 容量大约为20M
        
        ◆window.localStorage.setItem(key,value)  设置存储内容
        ◆window.localStorage.getItem(key)        获取内容
        ◆window.localStorage.removeItem(key)     删除内容
        ◆window.localStorage.clear()            清空内容
        
    ☞ sessionStorage：
          1. 生命周期为关闭当前浏览器窗口
           2. 可以在同一个窗口下访问
           3. 数据大小为5M左右
           
         ◆window.sessionStorage.setItem(key,value)
        ◆window.sessionStorage.getItem(key)
        ◆window.sessionStorage.removeItem(key)
        ◆window.sessionStorage.clear()

//案例==========================================================================
<input type="text" id="txt" placeholder="输入您的账号" required>
<input type="text" id="password" placeholder="输入您的密码" required>
<input type="button" value="登录" id="login">
<input type="button" value="删除" id="remove">
<input type="button" value="查找" id="gets"> 
<P></P>

(function () {
    // 获取登录与删除按钮
    var login = document.querySelector('#login');
    var remove = document.querySelector('#remove');
    var txthtml = document.querySelector("p");
    var gets = document.querySelector('#gets');
    // 点击登录按钮时执行下面函数
    login.onclick = function () {
        // 获取账号与密码
        var custom = document.querySelector('#txt').value;
        var password = document.querySelector('#password').value;
        // 判断文本框是否输入账号密码
        if (custom != '' && password != '') {
            window.localStorage.setItem(custom, password);  //添加到本地储存
        } else {
            alert('请输入您的账号密码');
        };
    };
    // 根据账户删除储存
    remove.onclick = function () {
        // 获取账号
        var custom = document.querySelector('#txt').value;
        // 判断文本框是否输入要删除的账号
        if (custom != '') {
            window.localStorage.removeItem(custom); //删除key对应的储存
        } else {
            alert('您在删除所有的记录');
            window.localStorage.clear();        //清除所有储存
        };
        txthtml.innerHTML = '';
    };
    //根据账号进行查找
    gets.onclick = function () {
        // 获取账号
        var custom = document.querySelector('#txt').value;
        // 判断文本框是否输入要查找的账号
        if (custom != '') {
            txthtml.innerHTML = window.localStorage.getItem(custom);    //查找储存
        } else {
            alert('请输入您要查找的内容');
        };
    };
})();

操作多媒体

http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

作业：
     完成一个在线音乐播放器或者视频播放器

<style>
    /* 导入滑动条css文件,与link是一样的 */
    @import"./js/html5-js/h5-input-typeRange.css";
</style>
<body>
    <video id="dvd" width="800px" height="450px" poster="./img/多媒体文件/1.PNG">
        <source src="./img/多媒体文件/trailer.mp4">
    </video>
    <div id="control">
        <input type="button" value="播放">
        <input type="button" value="快进">
        <input type="button" value="后退">
        <input type="button" value="刷新">
        <input type="range" min="0" max="1" step="0.01" value="0">
    </div>
</body>
<script>
    (function () {
        // 获取操作元素
        var dvd = document.querySelector('#dvd');
        var playDvd = document.querySelectorAll('#control > input')['0'];
        var fastForward = document.querySelectorAll('#control > input')['1'];
        var bakcDvd = document.querySelectorAll('#control > input')['2'];
        var stopDvd = document.querySelectorAll('#control > input')['3'];
        var volumeInput = document.querySelectorAll('#control > input')['4'];

        // 播放与暂停
        playDvd.onclick = function () {
            if (dvd.paused) {
                dvd.play();
                playDvd.value = "暂停";
            } else {
                dvd.pause();
                playDvd.value = "播放";
            };
        };

        // 快进
        fastForward.onclick = function () {
            dvd.currentTime += 3;
        };

        // 后退
        bakcDvd.onclick = function () {
            dvd.currentTime -= 3;
        };

        // 停止
        stopDvd.onclick = function () {
            dvd.currentTime = 0;
        };

        // 音量
        dvd.volume = 0;
        volumeInput.onchange = function () {
            dvd.volume = parseFloat(volumeInput.value);
        };
    })();
</script>

Canvas画布

绘图工具

  ☞ 介绍canvas画布
  ☞ 设置画布大小： 使用属性方式设置
  ☞ 解决画布重绘问题
       1. 设置一次描边
       2. 开启新的图层

绘图方法

<!-- 准备画笔 -->
// 获取画布
var can = document.querySelector('canvas');
// 获取绘图上下文  注意: xx是自定义名字下面的xx.都是自定义,2d为固定值(没有其他值)
var xx = can.getContext("2d");

<!-- 画布的属性 -->
颜色：         xx.strokeStyle="值";     xx.fillStyle =="值"; 设置图形的 轮廓颜色与 图形的填充颜色
线宽：                 xx.lineWidth="值";                         注意：不需要带单位
线连接方式：            xx.lineJoin = " round/bevel/miter (默认) ";
线帽（线两端的结束方式）：xx.lineCap  = " butt(默认)/round/square ";   注意:在闭合图形里面体现不出


<!-- 其他操作坐标系的方法 平移 旋转 伸缩 -->
平移原点   xx.translate(x,y);
旋转      xx.rotate(弧度);
伸缩      xx.scale(x,y);
<!-- 画布的方法 -->
xx.moveTo(x,y)      落笔( 也叫平移落笔点 )
xx.lineTo(x,y)      连线
...                多边就要写多个连线
xx.closePath()      闭合路径 
<!-- 其他绘图的快捷函数 -->
绘制文本   绘制填充文本 == xx.fillText(文本的内容,x,y);   绘制镂空文本 == xx.strokeText();
绘制虚线   xx.setLineDash(数组);
绘制矩形   描边矩形 == xx.strokeRect(x,y,width,height);  填充矩形 == xx.fillRect(x,y,width,height);  
清除区域   xx.clearRect(x,y,width,height);
绘制图片   xx.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
绘制圆弧   xx.arc(x,y,radius,startradian,endradian[,direct]);   xx.arcTo(x1,y1,x2,y2,r);


<!-- 开始渲染 -->
xx.stroke();    xx.fill();      轮廓 与 填充 效果  
xx.beginPath();     开启新的图层  即:重新绘画不会影响前面的图形

绘图案例

--作业：
1. 从200,100的位置绘制宽为200高为150的矩形
2. 准备一个600*400的画布，三等分这个画布，分别绘制正方形。直角三角形，梯形


/* 绘制矩形 ================================================================================== */
<body>
    <!-- 注意:width和height不能写在css属性里面 -->
    <canvas width="800px" height="600px" style="border: 5px solid red"></canvas>
</body>
<script>
    (function () {
        // 准备画笔
        {
            // 获取画布
            var canvas = document.querySelector('canvas');
            // 获取绘图上下文
            var ctx = canvas.getContext("2d");
        }
        // 画笔属性
        {
            // 轮廓颜色
            ctx.strokeStyle = "blue";
            // 线宽
            ctx.lineWidth = "100";
            // 连线方式
            ctx.lineJoin = "bevel";
            // 线帽       注意: 在闭合图形里面体现不出
            ctx.lineCap = "round";
        }
        // 画图形
        {
            // 落笔
            ctx.moveTo(200, 100);
            // 连线
            ctx.lineTo(200, 350);
            ctx.lineTo(400, 350);
            ctx.lineTo(400, 100);
            // 闭合
            ctx.closePath();
        }
        // 开始渲染
        {
            // 描边
            ctx.stroke();
            // 新图层 :防止下面的描边重新渲染上面图形
            ctx.beginPath();
        }
    })();
</script>


/* 线性渐变 ==================================================================================== */
<body>
    <!-- 注意:width和height不能写在css属性里面 -->
    <canvas width="800px" height="600px" style="border: 5px solid red"></canvas>
</body>
<script>
    (function () {
        // 准备画笔
        {
            // 获取画布
            var canvas = document.querySelector('canvas');
            // 获取绘图上下文
            var ctx = canvas.getContext("2d");
        }
        // 线性渐变
        {
            var grd = ctx.createLinearGradient(200, 300, 600, 300);
            // 设置渐变颜色
            grd.addColorStop(0, "black");
            grd.addColorStop(0.5, "yellow")
            grd.addColorStop(1, "red");
        }
        // 画笔属性
        {
            // 轮廓颜色     注意: 要将渐变颜色赋值给画笔颜色
            ctx.strokeStyle = grd;
            // 线宽
            ctx.lineWidth = "300";
        }
        // 画图形
        {
            // 落笔
            ctx.moveTo(200, 300);
            // 连线
            ctx.lineTo(600, 300);
        }
        // 开始渲染
        {
            // 描边
            ctx.stroke();
            // 新图层 :防止下面的描边重新渲染图形
            ctx.beginPath();
        }
    })();
</script>


/* 径向渐变 ==================================================================================== */
<body>
    <!-- 注意:width和height不能写在css属性里面 -->
    <canvas width="800px" height="600px" style="border: 5px solid red"></canvas>
</body>
<script>
    (function () {
        // 准备画笔
        {
            // 获取画布
            var canvas = document.querySelector('canvas');
            // 获取绘图上下文
            var ctx = canvas.getContext("2d");
        }
        // 线性渐变
        {
            var lgd = ctx.createRadialGradient(200, 150, 50, 200, 150, 100);
            // 设置渐变颜色
            lgd.addColorStop(0, "black");
            lgd.addColorStop(0.5, "yellow");
            lgd.addColorStop(1, "red");
        }
        // 画笔属性
        {
            // 填充颜色
            // *****************************************
            ctx.fillStyle = lgd;
        }
        // 画图形
        {
            // 落笔
            ctx.moveTo(100, 50);
            // 连线
            ctx.lineTo(300, 50);
            ctx.lineTo(300, 300);
            ctx.lineTo(100, 300);
            // 闭合
            ctx.closePath();
        }
        // 开始渲染
        {
            // 填充效果
            // *****************************************
            ctx.fill();
            // 新图层 :防止下面的描边重新渲染图形
            ctx.beginPath();
        }
    })();
</script>

渐变方案

  ☞ 线性渐变
/* 线性渐变=================================================================================== */

//...准备画笔...
  
// 设置渐变
{
    var grd=ctx.createLinearGradient(x0,y0,x1,y1);
          x0-->渐变开始的x坐标
          y0-->渐变开始的y坐标
          x1-->渐变结束的x坐标
          y1-->渐变结束的y坐标    
    grd.addColorStop(0,"black");      设置渐变的开始颜色
    grd.addColorStop(0.1,"yellow");   设置渐变的中间颜色=>0~1之间
    grd.addColorStop(1,"red");        设置渐变的结束颜色
}
// 画笔属性
{
    // 轮廓颜色     注意: 要将渐变颜色赋值给画笔颜色
    ctx.strokeStyle = grd;
}

//...画图形...

// 开始渲染
{
    // 轮廓渲染(描边)
    ctx.stroke();
    // 新图层 :防止下面的描边重新渲染图形
    ctx.beginPath();
}



  ☞ 径向渐变
/* 径向渐变=================================================================================== */
//...准备画笔...
// 设置渐变
{
    var lgd=ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);
        x0,y0,r0-->渐变的开始圆的 x,y 坐标 , r0：开始圆的半径
        x1,y1,r1-->渐变的结束圆的 x,y 坐标 , r1：结束圆的半径 
        ( 一般 : x0=x1, y0=y1, r0<r1或者r0>r1  即:开始与结束中心点是一个坐标 )
    lgd.addColorStop(0,"black");      设置渐变的开始颜色
    lgd.addColorStop(0.1,"yellow");   设置渐变的中间颜色=>0~1之间
    lgd.addColorStop(1,"red");        设置渐变的结束颜色
}
// 画笔属性
{
    // 颜色     注意: 要设置填充颜色,lgd为前面设置渐变的变量
    // *********************************************
    ctx.fillstyle = lgd;
}
//...画图形...
// 开始渲染
{
    // 设置填充效果   注意: 不用设置描边
    // *********************************************
    ctx.fill();
    // 新图层 :防止下面的描边重新渲染图形
    ctx.beginPath();
}



//备注：
    addColorStop(offse,color);
    中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数

填充效果

  ctx.fill();         设置填充效果
  ctx.fillstyle="值"; 设置填充颜色

非零环绕原则

 ☞ 绘制一个如下图形

填充测试图

 ☞ 非零环绕原则：
      1. 任意找一点，越简单越好
      2. 以点为圆心，绘制一条射线，越简单越好（相交的边越少越好）
      3. 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，如果相加的区域等于0，则不填充。
      4. 非零区域填充
      
// 理解===========================================
    // 前提
    1. 绘制的是闭合图形
    2. 绘制的时候出现顺时针与逆时针
    // 判断方法 
    1.在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。
    2.判断绘制的线是否是从辅助线的左边穿过到辅助线的右边，此时这种穿过的方式记录为+1
    3.如果是从辅助线的右边穿到辅助线的左边，就记做-1.
    4.最后将所有记录的数字进行求和，如果求和的结果为0，代表这块区域不要填充，否则，必须填充
    
 ☞ 非零环绕原则案例：

非零环绕.png

绘制虚线

    原理：

    设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系

     例如： [10,10]  实线部分10px 空白部分10px         /   实线部分10px 空白部分10px   ...
     例如： [10,5]  实线部分10px 空白部分5px           /   实线部分10px 空白部分5px    ...
     例如： [10,5,20]  实线部分10px  空白5px  实线20px  /  空白部分10px 实线5px 空白20px...
     
    绘制：
     ctx.setLineDash(数组);
     ctx.stroke();
     
// 例如：==========================================================
// ...准备画笔,画笔属性...
// 画图形
{
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
}
// 开始渲染
{
    // 设置虚线
    ctx.setLineDash([2,4]);
    ctx.stroke();
}
// 注意：
    如果要将虚线改为实线，只要将数组改为空数组即可。

绘制动画效果

   ☞ 绘制一个描边矩形： xx.strokeRect(x,y,width,height) 
   ☞ 绘制一个填充矩形： xx.fillRect(x,y,width,height)  
   ☞ 清除：           xx.clearRect(x,y,width,height)  
   
   
   ☞ 实现动画效果： 
   
// 在定时器中
    1. 先清屏
    2. 绘制图形
    3. 处理变量
// 案例=======================================================================
    
<canvas style="border: 5px solid red">您的浏览器不支持画布</canvas>
<script>
    // 准备画笔
    {
        var canvas = document.querySelector("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var cat = canvas.getContext("2d");
    }
    // 画图形
    {
        // 准备变量
        var i = 1;  //控制方向
        var x = 0;  //控制x坐标,使矩形移动
        var n = 5;  //控制一次移动的距离
        // 定时器
        setInterval(function () {
            // 清除画布
            cat.clearRect(0, 0, canvas.width, canvas.height);
            // 设置图形颜色
            cat.fillStyle = "yellow";
            // 绘制图形
            // 注意fillRect包含了渲染,不需要重新渲染
            cat.fillRect(x, 100, 30, 100);
  
            // 处理变量 (即:实现动画效果)
            x += n * i;
            if (x > canvas.width - 30) {
                i = -1;
            } else if (x < 0) {
                i = 1;
            }
        }, 25);
    }
</script>

绘制文本

// 文字添加样式       注意:不能在绘制文字的时候添加线宽 即: ".lineWidth"
  ☞ 设置文字大小：
       content.font="20px 微软雅黑"
       备注： 该属性设置文字大小，必须按照cssfont属性的方式设置
  ☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】
        content.textAlign="left | right | center"
  ☞文字垂直对齐方式
         content.textBaseline="top | middle | bottom | alphabetic(默认)"
  ☞文字阴影效果
         ctx.shadowColor="red";  设置文字阴影的颜色
         ctx.shadowOffsetX=值;   设置文字阴影的水平偏移量
         ctx.shadowOffsetY=值;   设置文字阴影的垂直偏移量
         ctx.shadowBlur=值;      设置文字阴影的模糊度
         
         
// 画图形
  ☞ 绘制填充文本
      content.fillText(文本的内容,x,y)
  ☞ 绘制镂空文本
       content.strokeText();


// 准备画笔
// 画笔属性
// 画图形
// 渲染
<canvas style="border: 1px solid red">您的浏览器不支持画布</canvas>
<script>
    (function () {
        // 准备画笔
        {
            var canvas = document.querySelector('canvas');
            canvas.width = 800;
            canvas.height = 600;
            var cat = canvas.getContext('2d');
        }
        // 画笔属性
        {
            // 设置  轮廓颜色与 图形的填充颜色
            cat.strokeStyle = "yellow";
            cat.fillStyle = "yellow"
            // 文字属性
            cat.font = '20px 宋体';
            cat.textAlign = 'center';
            cat.textBaseline = 'middle';
            // 阴影效果
            cat.shadowColor = 'red';
            cat.shadowOffsetX = '4';
            cat.shadowOffsetY = '4';
            cat.shadowBlur = '8';
        }
        // 画图形+渲染  注意 : cat.fillText('文字',x,y); 与cat.strokeText();在画图形的同时也渲染了
        {
            // 设置 轮廓文字(空心文字) 与填充文字
            cat.fillText('加油中国',300,300);
            cat.strokeText('中国最棒',300,100);
            // 新图层
            cat.beginPath();
        }
    })();
</script>

绘制图片

  ☞    
      //将图片绘制到画布的指定位置
     content.drawImage(图片对象,x,y);
  ☞ 
     //将图片绘制到指定区域大小的位置  x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
     content.drawImage(图片对象,x,y,width,height);
  ☞ 
     //将图片的指定区域绘制到指定矩形区域内
     content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
     // sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值 截取图片区域的大小
     // dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小
     

   ☞ 
      解决图片绘制到某一个区域的按原比例缩放绘制：
        绘制宽：绘制高==原始宽：原始高
       绘制高 = 绘制宽 * 图片高 / 图片宽;

// 案例===============================================================
<canvas style="border: 1px solid red">您的浏览器不支持画布</canvas>
<script>
    (function () {
        // 准备画笔
        {
            var canvas = document.querySelector('canvas');
            canvas.width = 800;
            canvas.height = 600;
            var cat = canvas.getContext('2d');
        }
        // 画笔属性
        // 绘制图形
        {
            // 创建一个图片对象
            var img = document.createElement('img');
            img.src = './img/多媒体文件/1.PNG';
        }
        // 准备渲染图形
        {
            img.onload = function () {
                {
                    // 为了图片不失真,就要保证图片的高与宽的比例
                    // 计算公式: 画布绘制宽:绘制高=图片原始宽:原始高 === 绘制高=绘制宽*图片高/图片宽;
                    // 注意:在外面计算比例高会出现图片没有加载的情况
                    var img_width = img.width;
                    var img_height = img.height;
                    var drowHeight = 800 * img_height / img_width;
                    console.log(img_width, img_height);
                }
                cat.drawImage(img, 0, 56, 801, 340, 0, 0, 800, drowHeight);
                //x.drawImage(img, --图片切割的范围, --------画布显示的范围);
            };
        }
    })();

绘制圆弧

// 方法1=============================================================
   ☞
     content.arc(x,y,radius,startradian,endradian[,direct]);
             x,y            圆心的坐标
             radius         半径
             startradian    开始弧度
             endradian      结束弧度
             direct         方向（默认顺时针 false）   true 代表逆时针
             
   ☞ 0度角在哪？
          以圆心为中心向右为0角 顺时针为正，逆时针为负
             
   ☞ 备注：
        角度 和 弧度的关系： 角度:弧度= 180:π(pi)
         特殊值
           0度 = 0弧度
           30度 = π/6   (180度的六分之一)
           45度 = π/4   
           60度 = π/3
           90度 = π/2
           180度 = π
           360度 = 2π
           
           
    ☞ 绘制圆上任意点：  
        公式：
           x=ox+r*cos( 弧度 )   y=oy+r*sin( 弧度 ) === var x = 50 + 100 * Math.cos(Math.PI / 3);
         ox: 圆心的横坐标
         oy: 圆心的纵坐标
         r： 圆的半径
         
// 方法2========================================================
arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

// 详情见下图

提示：请使用 stroke() 方法在画布上绘制确切的弧。
// 注意 : 在使用acrTo();方法之前. 必须要使用 moveTo(); 方法创建起点
JavaScript 语法：  context.arcTo(x1,y1,x2,y2,r);
参数      描述
x1      两切线交点的横坐标。
y1      两切线交点的纵坐标。
x2      第二条切线上一点的横坐标。
y2      第二条切线上一点的纵坐标。
r       弧的半径。
// 通过创建 3个点 [-起点-] 和 [-x1,y1-]交点 与 [-x2,y2-]第二条线的点 . 形成二条射线,组成的角 . 在通过半径去画这个角的切线


// 案例==================================================================
<canvas style="border: 1px solid red">您的浏览器不支持画布</canvas>
<script>
    (function () {
        // 准备画笔
        {
            var canvas = document.querySelector('canvas');
            canvas.width = 800;
            canvas.height = 600;
            var cat = canvas.getContext('2d');
        }
        // 画笔属性
        {
            cat.strokeStyle = 'red';
        }
         
         
        // 画图形       第一种画园弧方法================================
        {
            //      x    y   r   开始角度  结束角度     旋转方向
            cat.arc(50, 50, 100, 0,       Math.PI / 2, false);
        }
        // 渲染
        {
            cat.stroke();
            cat.beginPath();
        }
        // 绘制圆上任意一点
        {
            var x = 50 + 100 * Math.cos(Math.PI / 3);
            var y = 50 + 100 * Math.sin(Math.PI / 3);
            cat.arc(x, y, 3, 0, 2 * Math.PI, false);
        }
        // 渲染
        {
            cat.fill();
            cat.beginPath();
        }
         
         
        // 画图形       第二种画园弧的方法=============================
        // 注意 : opera不支持 , 且需要绘制起点
        {
            // 第一个点的x,y坐标
            cat.moveTo(300, 60);
            //         第二个x,y    第三个x,y  半径
            cat.arcTo(400, 50,     400, 200,  100);
        }
        // 渲染
        {
            cat.stroke();
        }
    })();
</script>

三个点确定,2条射线,组成一个角,画角的切线

平移【坐标系原点的平移】

ctx.translate(x,y);

   特点：
      通过该方法可以将原点的位置进行重新设置。

   注意：
       1. translate(x,y) 中不能设置一个值

       2. 与moveTo(x,y) 的区别：

            moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变

            translate(x,y) 是将坐标系中的原点位置发生改变

旋转【坐标系旋转】

ctx.rotate(弧度)

伸缩【坐标系伸缩】

 ctx.scale(x,y)

   备注：
       沿着x轴和y轴缩放

       x,y 为倍数  例如： 0.5  1

平移 旋转 伸缩 【案例】

<canvas style="border: solid red">您的浏览器不支持canvas画布</canvas>
<button>点击</button>
<script>
    (function () {
        var but = document.querySelector('button');
        var canvas = document.querySelector('canvas');
        canvas.width = 800;
        canvas.height = 600;
        var cat = canvas.getContext('2d');
         
        but.onclick = function () {
            // 清除原来图形
            cat.clearRect(0, 0, 800, 600);
            // 平移
            cat.translate(300, 300);
            // 旋转
            cat.rotate(Math.PI / 3);
            // 伸缩
            cat.scale(0.5, 0.5);
            // 绘制图形+渲染
            cat.fillRect(0, 0, 100, 100);
        };
        // 绘制图形+渲染
        cat.fillRect(0, 0, 100, 100);
    })();
</script>