HTML5网页游戏开发

Posted on 2023-05-16 14:08 来颗维C 阅读(95) 评论(0) 编辑收藏举报

HTML概述

互联网上的应用程序被称为Web应用程序,web应用程序使用Web文档(网页)来表示用户界面,Web文档都遵循html格式,html5是最新的html标准

HTML基础

HTML是HyperText Markup Language(即超文本),它是通过嵌入代码或标记代码来表名文本格式的国际标准。它编写的文件扩展名是.html或者.htm,这种网页文件的内容通常是静态的。

<!--
 * @Descripttion: 维C的代码
 * @version: 1.0.0
 * @Author: Weiguanghao
 * @Date: 2023-04-27 15:50:35
 * @LastEditors: Weiguanghao
 * @LastEditTime: 2023-04-27 15:54:03
-->
<!-- 告诉浏览器我们是用的是html标准 -->
<!DOCTYPE html>
<!-- 表示内容为英文  <html>标签表示告诉浏览器这是html文件的头-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- html文件的标题 -->
    <title>Document</title>
</head>
<body>
    <!-- html文件的内容 -->
    
</body>
<!-- 表示html文件到此结束 -->
</html>

HTML5用

<!DOCTYPE html>//告诉浏览器，我们要使用什么规范
 <html>
     <head>//代表网页头部
         <meta charset="utf-8">//描述性标签，用来描述网站的一些信息，便于被搜索引擎搜索
         <title></title>//网页标题
     </head>
     <body>//代表网页主题
     </body>
 </html>

DOCTYPE：告诉浏览器，我们要使用什么规范
head: 代表网页头部
meta：描述性标签，用来描述网站的一些信息，便于被搜索引擎搜索
title：网页标题
body：代表网页主题

网页基本标签

标题标签

h1~h6
段落标签
换行标签
水平线标签
字体样式标签
- 粗体
- 斜体
注释和特殊符号
- 注释快捷键Ctrl+/
- 特殊符号 &开头 ;结尾
  - 空格 &nbsp；
  - 大于符号 > gt
  - 小于符号 < lt
  - 版权符号 © copy

图像标签

<img src="path" alt="text" title="text" width="x" height="y"/>

src 图像地址(必填) ../ 代表上一级目录
- 绝对路径
- 相对路径 (推荐使用)
alt(必填) 图像未加载出来时代替文字
title 鼠标悬停提示文字
width 图像宽度
height 图像高度

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href 链接路径
target 链接在哪个窗口打开
- _self 自身页面打开
- _blank 新建页面打开

页面间链接

从一个页面链接到另一个页面

锚链接

需要一个锚标记 name="top"
跳转 href="#top"

功能性链接

 <a href="mailto:2417510362@qq.com">点击联系我</a>

邮件链接 mailto

QQ通讯组件

百度搜索 QQ推广-->推广工具-->QQ通讯组件-->复制代码

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
  - p标签 h1-h6...
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
  - a strong em...

列表标签

有序列表应用范围：试卷，问答...

 <ol>
         <li></li>
         <li></li>
         <li></li>
     </ol>

无序列表应用范围：导航，侧边栏...

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

定义列表应用范围：公司网站底部

 <dl>
         <dt></dt>
         <dd></dd>
         <dd></dd>
         <dd></dd>
     </dl>

dl:标签

dt：列表名称

dd:列表内容

表格标签

 <table border="" cellspacing="" cellpadding="">
         <tr>
             <td>Data</td>
             <td>Data</td>
         </tr>
         <tr>
             <td rowspan="">Data</td>
             <td colspan="">Data</td>
         </tr>
     </table>

border 边框的厚度
cellpadding单元格填充单元格中内容到单元格边框的距离可以用来撑开单元格
cellspacing 单元格间距
rowspan 跨行
colspan 跨列

媒体标签

视频元素 video
```
<video src="" controls autoplay></video>
```
- src:资源路径
- controls：控制台
- autoplay: 自动播放

音频元素 audio

<audio src="" controls autoplay></audio>

页面结构分析

header 标签头部区域的内容（用于页面或页面的一块区域）
footer 标记脚部区域的内容（用于整个页面或页面的一块区域）
section 页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用语侧边栏）
nav 导航内辅助内容

iframe内联框架

<iframe src="" width="" height=""></iframe>

表单标签（重点）

<form action="" method="post">
		<p>名字: <input type="text" name="username" /> </p>
		<p>密码: <input type="password" name="password" /> </p>
		<p>
			<input type="submit"/>
			<input type="reset"/>
		</p>
	</form>

action:表单提交的位子，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
- get：可以在url中看到提交的信息，不安全，高效
- post:比较安全，传输大文件
表单元素格式
- type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
- name 指定表单元素的名称
- value 元素的初始值。type为radio时必须指定一个值
- size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
- maxlength type为text或password时，输入的最大字符数
- checked type为radio或checkbox时，指定按钮是否是被选中

文本框和单选框

<input type="text" name="username" />  文本框
<input type="password" name="password" /> 密码框
<!-- value 默认初始值 -->
<p>性别：
			<input type="radio" name="sex" value="boy" />男
			<input type="radio" name="sex" value="girl" />女
</p>
<!-- value 单选框的值
	 name 表示组-->

多选框和按钮

<p>爱好：
			<input type="checkbox" name="hobby" value="sleep"/>睡觉
			<input type="checkbox" name="hobby" value="code" checked/>敲代码
			<input type="checkbox" name="hobby" value="chat"/>聊天
			<input type="checkbox" name="hobby" value="game"/>游戏
</p>
input type="button" value=""  普通按钮  <!-- value 按钮的名字-->
input type="image"			  图像按钮
input type="submit"	value=""  提交按钮
input type="reset"	value=""  重置按钮

增强鼠标可用性

<p>
			<input type="text" id="mark"/>
			<label for="mark">你点我试试</label>
		</p>

列表框、文本域和文件域

<p>下拉框,列表框：
		<select name="列表名称">
			<option value="china">中国</option>
			<option value="usa">美国</option>
			<option value="Switzerland" selected>瑞士</option>
			<option value="India">印度</option>
		</select>
		</p>

selected 指定下拉框是默认选中

<p>文本域：
		<textarea name="textarea" rows="10" cols="50">文本内容</textarea>
		</p>
<p>文件域
			<input type="file" name="files"/>
		</p>

简单验证、滑块和搜索框

<p>邮箱验证：
			<input type="email" name="email"/>
		</p>
<p>URL验证：
			<input type="url" name="url"/>
		</p>
<p>数字验证：
			<input type="number" name="num" min="" max="" step=""/>
		</p>
<p>滑块：
			<input type="range" name="voice" min="" max="" step=""/>
		</p>
<p>搜索：
			<input type="search" name="search"/>
		</p>

表单的应用

隐藏域 hidden（属性不会消失）
只读 readonly
禁用 disabled

表单的初级验证

思考？为什么要进行验证

减小服务器压力
安全

placeholder 提示信息
required 非空判断
pattern 正则表达式

HTML5调用Javascript

<head>
    <script src="demo.js"></script>
</head>

html页面中允许使用多个js文件，

引入的js文件位置和单个文件一样：

可以将所有js文件放在Head部分

或者，把它放在文件的底部

</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>

CSS笔记

如何学习CSS

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变...）
盒子模型
浮动
定位
网页动画（特效效果）

1.什么是CSS

1.1 什么是CSS

CSS（cascading style sheet）层叠样式表

CSS：表现（美化网页）

字体，颜色，编剧，高度，宽度，背景图片，网页定位，网页浮动......

1.2 快速入门

行内样式

 <h1 style="color: red;"></h1>

内部样式

 <!-- <style>可以编写css的代码，每一个声明，最好使用分号结尾 -->
         <style>
         选择器{
             声明1；
             声明2；
             声明3；
         }
         </style>

外部样式（推荐使用）

 <link rel="stylesheet" href=""/>

Link标签有两个作用

链接样式表 rel="stylesheet" 指明链进来的对象是个样式表
定义文档与外部资源的关系 href=""

优先级：就近原则

样式离元素越近优先级越高

1.3 CSS的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用外部引用独立于html的css文件
利于SEO，容易被搜索引擎收录

2.选择器（重要）

作用：选择页面上的某一个或者某一类元素

2.1基本选择器（重要）

标签选择器

 格式：标签{}

会选择到页面上所有的这个标签的元素

类选择器 class

 格式：.类名{}

可以多个标签归类，同一个class，可以复用

id选择器

 格式：#id名{}

id必须保证全局唯一

优先级

不遵循就近原则，固定的

id选择器>class选择器>标签选择器

2.2层次选择器

后代选择器

某个元素的后面的所有指定元素都会改变

     body p{
         background: red;
     }

子选择器

某个元素的后面的一代指定元素都会改变

 body>p{
             background: red;
         }

相邻兄弟选择器

只有一个相邻（向下）同辈

 .active+p{
             background: red;
         }

通用兄弟选择器

当前选中元素的向下的所有兄弟元素同辈

 .active~p{
             background: red;
         }

2.3结构伪类选择器

 /* ul的第一个子元素 */
         ul li:first-child{
             background: red;
             }
         /* ul的最后一个子元素 */
         ul li:last-child{
             background: yellow;
             }
 /* 选中p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效。按顺序选*/
 p:nth-child(1){
                 background: red;
             }
 /* 选中父元素下的p元素的第二个。按类型选 */
 p:nth-of-type(1){
                 background: yellow;
             }

2.4属性选择器（重要）

id+class结合 []{}

属性名，属性名=属性值（正则）

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

 a[href^=http]{
 background: red;
 } 
 a[id=first]{
 background: blue;
 }
 a[id]{
 background: greenyellow;
 }
 a[class*="links"]{
 background: gray;
 }
 a[href$=com]{
 background: red;
 }

3.美化网页元素

3.1 为什么要美化页面

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来（约定俗成）

3.2 字体样式

 body{
                 font-family: "楷体";
                 font-size: 50px;
                 font-weight: bold;
                 color: #00FFFF;
             }

font-family:字体
font-size: 字体大小
font-weight:字体粗细
color: 字体颜色

3.3文本样式

颜色 color rgb rgba
文本对齐方式 text-align=center
首行缩进 text-indent：2em
行高 line-height: 单行文字上下居中 line-height=height
文本装饰 text-decoration:
文本和图片对齐 vertical-align: middle;

3.4 超链接伪类

只需要记住hover

 a:link {color: #FF0000}     /* 未访问的链接 */
 a:visited {color: #00FF00}  /* 已访问的链接 */
 a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
 a:active {color: #0000FF}   /* 被选择的链接 */

3.5 文本阴影

 h1{
     text-shadow: 2px 2px #ff0000;
 }

3.6 列表

 /* ul li */
             /* 
              list-style:
                 none   去掉圆点
                 circle 空心圆
                 decimal数字
                 square 正方形
              */
 #nav{
                 width: 300px;
                 background: gray;
             }
             h2{
                 background: red;
                 text-indent: 2em;
             }
             /* ul{
                 background: gray;
             } */
             ul li{
                 list-style: none;
                 line-height: 30px;
             }
             a{
                 text-decoration: none;
                 font-size: 15px;
                 color: black;
             }
             a:hover{
                 color: orange;
                 text-decoration: underline;
             }

3.7 背景

background：颜色，图片，图片位置，平铺方式

margin-top: 0px; margin-right: 0px; margin-bottom: 0px; position: relative;">

background-image: url
background-position:
background-repeat:

 div{
                 width:1000px;
                 height: 700px;
                 border: 1px solid red;
                 background-image: url(img/logo.png);
             }
             .div1{
                 background-repeat: repeat-x;
             }
             .div2{
                 background-repeat: repeat-y;
             }
             .div3{
                 background-repeat: no-repeat;
                 background-position: 200px 200px;
             }

3.8 渐变色

https://www.grabient.com/

copy css

4.盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

span标签：重点要突出的字，使用span套起来（约定俗成）

4.2 边框

边框的粗细 border-width:
边框的样式 border-style:
边框的颜色 border-color:

 body{
                 margin: 0;
                 padding: 0;
                 text-decoration: none;
             }
             #box{
                 width: 300px;
                 border-width: 1px;
                 border-style: solid ;
                 border-color:red ;
             }
             h2{
                 font-size: 16px;
                 background: blue;
                 text-align: center;
                 margin: 0;
                 color: white;
             }
             form{
                 background: greenyellow;
             }
             div:nth-of-type(1) input{
                 border: 3px solid black;
             }
             div:nth-of-type(2) input{
                 border: 3px dashed saddlebrown;
             }
             div:nth-of-type(3) input{
                 border: 3px solid slategray;
             }

4.3 内外边距

外边距 margin

外边距的妙用 margin:0 auto; 居中元素

要求：块元素，块元素有固定的高度

 margin: 1px 2px 3px 4px;     顺时针旋转
                 margin-top: 1px;
                 margin-right: 2px;
                 margin-bottom: 3px;
                 margin-left: 4px;

内边距 padding

 padding: 1px 2px 3px 4px;
                 padding-top: 1px;
                 padding-right: 2px;
                 padding-bottom: 3px;
                 padding-left: 4px;

盒子的计算方式：你这个元素到底多大

margin+border+padding+内容宽度

4.4 圆角边框

 border-radius: 上左 上右 下右 下左; 顺时针
                 border-top-left-radius: ;
                 border-top-right-radius: ;
                 border-bottom-right-radius: ;
                 border-bottom-left-radius: ;
 div{            半圆形
                 width: 100px;
                 height: 50px;
                 border: 1px solid red;
                 border-radius: 50px 50px 0 0;
             }
 div{            圆形
                 width: 100px;
                 height: 100px;
                 border: 1px solid red;
                 border-radius: 50px;
             }

4.5 盒子阴影

 box-shadow: 10px 10px 100px yellow;

box-shadow: x轴偏移 y轴偏移模糊半径颜色;

5.浮动

5.1 标准文档流

块级元素：独占一行

 h1~h6 p div 列表 ....

行内元素：不独占一行

 span a img strong ....

行内元素可以被包含在块级元素中，反之，则不可以

5.2 display

                  display: block;        块元素
                  display: inline;       行内元素
                  display: inline-block; 是块元素，但是可以内联，在一行
                  display: none;

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

5.3 float

                 float: left;
                 float: right;

浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。

5.4 父级边框塌陷的问题

clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素

解决方案：

增加父级元素的高度
增加一个空的div标签，清除浮动

 .clear{
                 clear: both;
                 margin: 0;
                 padding: 0;
             }

overflow

 在父级元素中增加一个 overflow: hidden;

父类添加一个伪类 :after 推荐使用

 #father:after{
                 content: '';
                 display: block;
                 clear: both;
             }

6.定位

6.1 相对定位

相对于自己原来的位置进行指定的偏移,相对定位的话，它仍然在标准文档流中，原来的位置会被保留

 position: relative;
 top: -20px;
 bottom: 20px ;
 left: -10px;
 right: 30px;

6.2 绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常相对于父级元素进行偏移
在父级元素范围内移动时，相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位子不会被保留

 position: absolute;
 top: ;
 bottom: ;
 left: ;
 right: ;
 position: fixed;
 top: ;
 bottom: ;
 left: ;
 right: ;

6.3 z-index

z-index的值只代表层叠关系。值越高，层级越高。越浮在上面，越低，越沉在下面。默认是0

 z-index: 0;

6.4 背景透明度

 opacity: 0.5;

opacity 的取值范围是 0~1

canvas

① 主要作用：绘制矢量图

② 矢量图图形（路径）-（ILL）位图图像（像素点）- PS中图像都是位图

③ Canvas 可以制作动画,可是不是为了制作动画而生的也可以制作游戏。主要为了画图而生。

④ 可以设置宽高推荐样式写在style。Canvas 相当于是一个绘制图形的容器，并没有绘制功能，须要借助JS（脚本）实现绘制功能

思路：

getContext( )
var context = cnvas.getContext('2d');
          // 图像的绘制
          // 開始      beginPath（）開始路径
          // 起点     
          // 过程路径
          // 终点
          // 落笔
          // 结束     closePath（）结束路径

方法：

beginPath（） 开始路径
moveTo（x,y） 把路径移到画布中指定点 不创建路径
lineTo（x,y） 加入一个新点
closePath（） 结束路径
fillStyle     用来设置填充颜色
stroke        绘制异地内衣好的路径
fill（）      填充已定义好的路径

context.lineWidth = 5; 
主要书写顺序 先颜色再填充


     <script>
          var cnvas = document.getElementById('cnvas');
          var context = cnvas.getContext('2d');
          context.moveTo(200,100);
          context.lineTo(600,100);
          context.lineTo(600,300);
          context.lineTo(200,300);
          context.lineTo(200,100);
          context.closePath();
          context.fillStyle = 'red';
          context.stroke(); // 描边
          context.fill(); // 填充颜色
     </script>

矩形的绘制：

rect（x，y。w。h）：x y为起始坐标 w,h为矩形的宽高

fillRect（x。y，w。h）：參数同上与上面差别：上面仅仅绘制，不填充，fillRect（）填充

圆形的绘制：

arc（x，y。r，sa，ea。true/false）

x y为圆心坐标。r为半径，sa ea分别为起始角度和结束角度。最后一个參数为true 顺时针画圆。 false为逆时针画圆

var cnvas = document.getElementById('cnvas');
          var context = cnvas.getContext('2d');
          for (var i = 0; i < 5; i++) {
               context.beginPath();
               context.strokeStyle = 'red';
               // context.arc(10*Math.pow(2,i),100,10*Math.pow(2,i),0,Math.PI*2,true);
               context.arc(10*i,100,10*i,0,Math.PI*2,true);
               context.stroke();
               context.closePath();
          };
          for (var i = 0; i < 5; i++) {
               context.beginPath();
               context.strokeStyle = 'yellow';
               context.arc(10*Math.pow(2,i),300,10*Math.pow(2,i),0,Math.PI*2,true);
               // context.arc(10*i,100,10*i,0,Math.PI*2,true);
               context.stroke();
               context.closePath();
          };

context.lineCap = 'round'; 线帽

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke()

贝塞尔曲线

quadraticCurveTo（kx,ky,ex,ey）二次贝塞尔曲线，一个控制点，一个终点

bezierCurveTo（kx1。ky1，kx2。ky2，ex。ey） 三次贝塞尔曲线，两个控制点一个终点

context.clearRect（x,y,w,h）; 清画布

 <script>
    var cnvas = document.getElementById('cnvas');
    var context = cnvas.getContext('2d');
    context.fillStyle = 'rgba(0,0,0,1)';
    context.fillRect(0,0,800,400);
     // 三个控制点 每个点都须要两个值 这两个点随机
     // 每条线 都须要颜色(rgba) 三个颜色随机
     // setInterval(fun,1000);
     // bezierCurveTo
     // Math.round()  Math.random()
     //
   setInterval(draw,1000);
   function draw () {
      var kx1 = Math.round(Math.random()*700);
      var ky1 = Math.round(Math.random()*350);
      var kx2 = Math.round(Math.random()*750);
      var ky2 = Math.round(Math.random()*400);
      var ex =  Math.round(Math.random()*750);
      var ey =  Math.round(Math.random()*400);
      var colorR = Math.round(Math.random()*255);
      var colorG = Math.round(Math.random()*255);
      var colorB = Math.round(Math.random()*255);
      context.shadowOffsetX = 4; // 阴影Y轴偏移 
      context.shadowOffsetY = 5; // 阴影X轴偏移 
      context.shadowBlur = 6; // 模糊尺寸 
      context.shadowColor = "rgba("+colorG+", "+colorB+", "+colorR+", 0.4)"; // 颜色
      context.fillStyle = 'rgba(0,0,0,1)';
      context.fillRect(0,0,800,400);
      context.beginPath();
      context.fillStyle = 'rgba(0,0,0,0.1)';
      context.fillRect(0,0,800,400);
      context.bezierCurveTo(kx1,ky1,kx2,ky2,ex,ey);
      context.lineWidth = 4;
      context.strokeStyle = "rgb("+colorR+","+colorG+","+colorB+")";
      context.stroke();
      context.closePath();
   }
 </script>

绘制文字

fillText(text。x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出。填充文字

strokeText(text,x,y,maxWidth)：text表示文字，x，y为坐标，maxWidth可选，为文字最大宽度，防止文字溢出，绘制文字

save（） restore（）
① 绘制复杂图形不可缺少的方法,分别用来保存、恢复canvas的状态，无參数
② sava用于保存canvas状态,save之后,可以调用canvas的平移,缩放,旋转，裁切之类的操作
③ restore用于恢复canvas之前的保存状态，防止save后的操作对兴许绘制造成影响
④ sava和restore配对使用，restore的次数小于等于save

阴影属性：

shadowColor：设置阴影颜色shadowBlur：设置阴影模糊级别shadowOffsetX：设置阴影在x轴上距离图形的距离shadowOffsetY：设置阴影在y轴上距离图形的距离

canvas绘制图像视频 drawImage(img,x,y,width,height) 或者是 drawImage(img,x,y)

【1】  HTML结构：
     <div class="wrap" id="wrap">
          <canvas id='cavas' width=800 height=400></canvas>
          <img src="1.png" alt="" id="img">
     </div> 

JS结构:

     context.beginPath();
     context.drawImage(img,60,60,50,50); //  drawImage(img,x,y,width,height)
     context.closePath();
     
     【2】
<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  var img=new Image();
  img.src="flower.png";
  cxt.drawImage(img,0,0);
</script>

图像的平铺

context.createPattern(mage,"repeat|repeat-x|repeat-y|no-repeat");

img：图片 type： repeat整个画布平铺 repeat-x在x轴方向上平铺 repeat-y在y轴方向上平铺 no-repeat不平铺

var imageObj = new Image();    
       imageObj.src = "1.png";  

       var pattern = context.createPattern(imageObj, "repeat");    
       context.rect(10, 10, cavas.width - 20, cavas.height - 20);           
       context.fillStyle = pattern;    
       context.fill();

drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也可以绘制图像的某些部分，以及/或者添加或降低图像的尺寸。

JavaScript 语法 1在画布上定位图像：context.drawImage(img,x,y)

JavaScript 语法 2在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height); `

JavaScript 语法 3剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

canvas绘制视频

<script>
  var v=document.getElementById("video1");
  var c=document.getElementById("myCanvas");
  ctx=c.getContext('2d');

  v.addEventListener('play', function() {var i=window.setInterval(function()   {ctx.drawImage(v,0,0,270,135)},20);},false);
  v.addEventListener('pause',function() {window.clearInterval(i);},false);
  v.addEventListener('ended',function() {clearInterval(i);},false);  
</script>

Cavans 渐变

<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  var grd=cxt.createLinearGradient(0,0,175,50);
  grd.addColorStop(0,"#FF0000");
  grd.addColorStop(1,"#00FF00");
  cxt.fillStyle=grd;
  cxt.fillRect(0,0,175,50);
</script>

一、canvas简介

1.1 什么是canvas？（了解）

是HTML5提供的一种新标签

    <canvas></canvas>
     英 ['kænvəs]  美 ['kænvəs]   帆布 画布

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等

1.2 canvas主要应用的领域（了解）

游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。
25 超棒的 HTML5 Canvas 游戏
可视化数据.数据图表话，比如:百度的echart
banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
完整的canvas移动化应用
我们课程的目标
- 我们不是主要做游戏开发的
- 要求必须会做基本的用canvas绘制的特效页面：比如，传智前端官网。
- 会用canvas做一些简单的广告、活动页面
我们课程的案例和项目演示
canvas的标准：
- 最新标准：http://www.w3.org/TR/2dcontext/
- 稳定版本的标准：http://www.w3.org/TR/2013/CR-2dcontext-20130806/
- 目前来说，标准还在完善中。先用早期的api足够完成所有的应用

二、canvas绘图基础

canvas绘图 html中的基本结构以及调用外部js文件方法

<!-- 告诉浏览器，我们要使用什么规范 -->
<!DCOTYPE html>
<html>
    <head>
        <!-- 声明使用字符编码 -->
        <meta charset="utf-8">
        <!-- 网页标题 -->
        <title>HTML5 Canvas练习</title>
        
        <!-- 调用外部js文件 -->
        <script src="demo.js"></script>

        <style>
          /*这里是CSS样式注释 在这里面设计页面的风格*/
          body{
            /* 页面背景颜色 */
            background-color: aqua;
          }
          #c1{
            /* canvas画布颜色 */
            background-color: azure;
            border: thin inset #006600;
            /* 改变canvas画布在页面中的位置 */
            margin: 200px; 
          }
        </style>
        <!-- 调用外部Javascript脚本 使用src属性调用时
        script标签里面不能有任何Javascript脚本 -->
    </head>
    <!-- 这里是HTML的注释 -->

    <body>
        <!--设置canvas画布的宽高属性 -->
        <canvas Id="c1" width="800" height="600" >
            您的浏览器不支持h5的新特性!请更换浏览器
        </canvas>

    </body>
</html>

2.0 sublime配置canvas插件（推荐）

推荐：
    安装插件：AndyJS2
    github地址： https://github.com/malun666/AndyJS2
    直接下载到：X:\Users\用户名\AppData\Roaming\Sublime Text 3\Packages

2.1 Canvas标签

2.1.1 canvas标签语法和属性（重点）

canvas：画布油布的意思 ==英 ['kænvəs] 美 ['kænvəs] ==
标签名canvas，需要进行闭合。就是一普通的html标签。
可以设置width和height属性，但是属性值单位必须是px，否则忽略。
width和hegiht：默认300*150像素
注意：
- 不要用CSS控制它的宽和高,会走出图片拉伸，
- 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
- 可以给canvas画布设置背景色

2.1.2 浏览器不兼容处理（重点）

ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持
只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)
移动端的兼容情况非常理想，基本上随便使用
2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持
如果浏览器不兼容，最好进行友好提示

    例如：                     
    <canvas id="c1">
        你的浏览器不支持canvas，请升级浏览器.浏览器不支持，显示此行文本
    </canvas>

浏览器不兼容，可以使用flash等手段进行优雅降级

2.2 canvas绘图上下文context

2.2.1 Context：Canvas的上下文、绘制环境。（重点掌握）

上下文：上知天文，下知地理。是所有的绘制操作api的入口或者集合。
Canvas自身无法绘制任何内容。Canvas的绘图是使用JavaScript操作的。
Context对象就是JavaScript操作Canvas的接口。
*使用[CanvasElement].getContext(‘2d’)来获取2D绘图上下文。

function Init()
{
var canvas  = document.getElementById( 'cavsElem' ); //获得画布
var ctx = canvas.getContext( '2d' );//注意：2d小写， 3d：webgl
}




window.addEventListener("load", Init, false);

2.3 基本的绘制路径（重点）

2.3.1 canvas坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

2.3.2 设置绘制起点(moveTo)

* 语法：ctx.moveTo(x, y); 
* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数：x,y 都是相对于 canvas盒子的最左上角。
* 注意：**绘制线段前必须先设置起点，不然绘制无效。**

2.3.3 绘制直线(lineTo)

* 语法：ctx.lineTo(x, y);
* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数：x,y 线头点坐标。

2.3.4 路径开始和闭合

* 开始路径：ctx.beginPath();
* 闭合路径：ctx.closePath();
* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离，
  每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

2.3.5 描边(stroke)

* 语法：ctx.stroke();
* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke
* stroke: （用笔等）画；轻抚；轻挪；敲击；划尾桨；划掉；（打字时）击打键盘
 英 [strəʊk]   美 [strok]

canvas绘制的基本步骤：
- 第一步：获得上下文 =>canvasElem.getContext('2d');
- 第二步：开始路径规划 =>ctx.beginPath()
- 第三步：移动起始点 =>ctx.moveTo(x, y)
- 第四步：绘制线(矩形、圆形、图片...) =>ctx.lineTo(x, y)
- 第五步：闭合路径 =>ctx.closePath();
- 第六步：绘制描边 =>ctx.stroke();

    html部分：
        <canvas id="cavsElem">
            你的浏览器不支持canvas，请升级浏览器
        </canvas>

    javascript部分：

    //===============基本绘制api====================
    //获得画布
    var canvas = document.querySelector('#cavsElem');
    var ctx = canvas.getContext('2d');  //获得上下文

    canvas.width = 900;     //设置标签的属性宽高
    canvas.height = 600;    //千万不要用 canvas.style.height
    canvas.style.border = "1px solid #000";

    //绘制三角形
    ctx.beginPath();        //开始路径
    ctx.moveTo(100,100);    //三角形，左顶点
    ctxStyle = "purple";    //设置填充颜色为紫色
    ctx.lineTo(300, 100);   //右顶点
    ctx.lineTo(300, 300);   //底部的点
    ctx.closePath();        //结束路径
    ctx.stroke();           //描边路径
    ctx.fill();             //填充颜色

综合案例：02绘制定位表格.html
综合案例：03画画板.html

2.3.7 填充(fill)

* 语法：ctx.fill(); 
* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。
    
    以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）
    “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，
    使此线段的终点完全落在路径范围之外。
    图2-14中的那三个箭头所描述的就是上面这个步骤。
    接下来，将计数器初始化为0，
    然后，每当这条线段与路径上的直线或曲线相交时，
    就改变计数器的值。如果是与路径的顺时针部分相交，则加1，
    如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，
    浏览器就会对其进行填充。
    如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了
* 案例： 04填充矩形.html

Paste_Image.png

填充颜色

contextStyle = "color";
........
context.fill();

2.3.8 快速创建矩形rect()方法

* 语法：ctx.rect(x, y, width, height);
* 解释：x, y是矩形左上角坐标， width和height都是以像素计
* rect方法只是规划了矩形的路径，并没有填充和描边。
* 改造案例：04填充矩形.html
*rect: abbr. 矩形（rectangular）；收据（receipt）

2.3.9 快速创建描边矩形和填充矩形

* 语法： ctx.strokeRect(x, y, width, height);
    - 参数跟2.3.8相同，注意此方法绘制完路径后立即进行stroke绘制
* 语法：ctx.fillRect(x, y, width, height);
    - 参数跟2.3.8相同， 此方法执行完成后。立即对当前矩形进行fill填充。

2.3.10 清除矩形(clearRect)

* 语法：ctx.clearRect(x, y, width, hegiht);
* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

2.4 绘制圆形（arc)

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。
- 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
- arc: 弧（度）弧形物；天穹英 [ɑːk] 美 [ɑrk]
- counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['kaʊntɚ]
- 解释：
  - x,y：圆心坐标。
  - r：半径大小。
  - sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。
  - eAngel:结束的角度，注意是弧度。π
  - counterclockwise：是否是逆时针。true是逆时针，false：顺时针
  - 弧度和角度的转换公式： rad = deg*Math.PI/180;
  - 在Math提供的方法中sin、cos等都使用的弧度
案例：05绘制圆形.html
案例：06绘制饼状图.html

2.5 绘制文字（会使用就可以了）

2.5.1 绘制上下文的文字属性（有印象就行了）

font 设置或返回文本内容的当前字体属性
- font 属性使用的语法与 CSS font 属性相同。

例如：ctx.font = "18px '微软雅黑'";

textAlign 设置或返回文本内容的当前对齐方式
- start : 默认。文本在指定的位置开始。
- end : 文本在指定的位置结束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左对齐。
- right : 文本右对齐。

    * 例如：ctx.textAlign = 'left';

对齐图片

textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic ：默认。文本基线是普通的字母基线。
- top ：文本基线是 em 方框的顶端。。
- hanging ：文本基线是悬挂基线。
- middle ：文本基线是 em 方框的正中。
- ideographic：文本基线是em基线。
- bottom ：文本基线是 em 方框的底端。

    例如： ctx.textBaseline = 'top';
    单词:
     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]
     ideographic：表意的；表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

设置文字为主

2.5.2 上下文绘制文字方法

* ctx.fillText()      在画布上绘制“被填充的”文本
* ctx.strokeText()    在画布上绘制文本（无填充）
* ctx.measureText()   返回包含指定文本宽度的对象
* 单词：measure 测量；估量；权衡   英 ['meʒə]   美 ['mɛʒɚ]

    //综合案例代码：
    ctx.moveTo( 300, 300 );
    ctx.fillStyle = "purple";               //设置填充颜色为紫色
    ctx.font = '20px "微软雅黑"';           //设置字体
    ctx.textBaseline = "bottom";            //设置字体底线对齐绘制基线
    ctx.textAlign = "left";                 //设置字体对齐的方式
    //ctx.strokeText( "left", 450, 400 );
    ctx.fillText( "Top-g", 100, 300 );        //填充文字

2.5.3 案例07文字绘制.html

2.6 绘制图片（drawImage）（重点）

2.6.1 基本绘制图片的方式

context.drawImage(img,x,y);
参数说明： x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

2.6.2 在画布上绘制图像，并规定图像的宽度和高度

context.drawImage(img,x,y,width,height);   
参数说明：width 绘制图片的宽度，  height：绘制图片的高度
如果指定宽高，最好成比例，不然图片会被拉伸</em>
    等比公式：  toH = Height * toW   /  Width;  //等比 
             设置高 = 原高度 * 设置宽/ 原宽度;

2.6.3 图片裁剪，并在画布上定位被剪切的部分

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数说明：
    sx,sy 裁剪的左上角坐标，
    swidth：裁剪图片的高度。 sheight:裁剪的高度 
    其他同上

2.6.4 用JavaScript创建img对象

第一种方式： 
   var img = document.getElementById("imgId");
第二种方式：
    var img = new Image();//这个就是 img标签的dom对象
    img.src = "imgs/arc.gif";
    img.alt = "文本信息";
    img.onload = function() {
        //图片加载完成后，执行此方法
    }

2.6.5 面向对象基础复习补充：

创建对象的方式：

    * var o = { name: '123', age: 18 }; //json方式创建
    * var o = new Object();  //通过new的方式创建
    * var o = new Persion(); //通过类的构造函数创建

JS中对象的属性创建方式

    * json的方式： var o = { age: 19 };
    * 直接添加属性：var o = {};  o.age = 19;//太分散了，不利于管理
    * 由于js动态语言的特性，如果属性不存在的时候，直接添加属性。
    * 构造函数添加属性
    * 原型添加公共的属性

JS的构造函数的原型
构造函数的原型就是：构造对象的模板，构造函数原型里面的所有的属性和方法都会共享给所有的构造函数构造出来的所有实例。

Paste_Image.png

案例： 08绘制图片.html
案例： 09绘制图片裁剪.html
案例： 10序列帧动画.html
案例： 11面向对象版本的动画帧.html 重点

2.6.6 补充 sublime制作代码段（推荐--已结讲过了）

第一步：sublime菜单栏→ 工具 → 制作代码段

第二步：修改输出的sublime代码段文本

<snippet>
    <content><![CDATA[
1、这里放要tab键 输出的内容
2、 ${1:this} 占位符，tab可以进行切换，数字是切换的索引。
    ：后面的是默认的文本。
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>简写的字母</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

第三步：保存到插件的文件夹中，后缀名为：.sublime-snippet
比如我存放的位置：
C:\Users\malunmac\AppData\Roaming\Sublime Text 3\Packages\User\snippets
snippets是我自己新建的文件夹。

三、 canvas进阶

3.1 Canvas颜色样式和阴影

3.1.1 设置填充和描边的颜色（掌握）

fillStyle : 设置或返回用于填充绘画的颜色
strokeStyle: 设置或返回用于笔触的颜色

以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.
一般先进行设置样式然后进行绘制。

例如：
ctx.strokeStyle = "red";      
ctx.strokeStyle = "#ccc";      
ctx.strokeStyle = "rgb(255,0,0)";      
ctx.strokeStyle = "rgba(255,0,0,6)";

3.1.2 设置阴影（了解，少用，性能差）

类比于CSS3的阴影。
shadowColor ：设置或返回用于阴影的颜色
shadowBlur ：设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离
shadowOffsetY：设置或返回阴影距形状的垂直距离

    ctx.fillStyle = "rgba(255,0,0, .9)"
    ctx.shadowColor = "teal";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.fillRect(100, 100, 100, 100);

例如：

案例： 12设置box盒子阴影.html
设置png图片的阴影，图片透明部分不会被投影。

3.2 复杂样式（了解）

3.2.1 创建线性渐变的样式（了解）

一般不用，都是用图片代替，canvas绘制图片效率更高。
线性渐变可以用于矩形、圆形、文字等颜色样式
线性渐变是一个对象
语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0起始坐标，x1,y1结束坐标

    例如：
    //创建线性渐变的对象，
    var grd=ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"black");  //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    grd.addColorStop(1,"white");  //添加一个渐变颜色
    ctx.fillStyle =grd;           //关键点，把渐变设置到 填充的样式

案例13设置线性渐变.html

3.2.2 设置圆形渐变（径向渐变）了解

创建放射状/圆形渐变对象。可以填充文本、形状等
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
radial 半径的；放射状的；光线的；光线状的英 ['reɪdɪəl] 美 ['redɪəl]
参数详解：
- x0: 渐变的开始圆的 x 坐标
- y0: 渐变的开始圆的 y 坐标
- r0: 开始圆的半径
- x1: 渐变的结束圆的 x 坐标
- y1: 渐变的结束圆的 y 坐标
- r1: 结束圆的半径

var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
rlg.addColorStop(0, 'teal');    //添加一个渐变颜色
rlg.addColorStop(.4, 'navy');
rlg.addColorStop(1, 'purple');
ctx.fillStyle = rlg;//设置 填充样式为延续渐变的样式
ctx.fillRect(100, 100, 500, 500);

案例14圆形渐变.html

3.2.3 绘制背景图（了解）

ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素了解
pattern：n. 模式；图案；样品英 ['pæt(ə)n] 美 ['pætɚn]
第一参数：设置平铺背景的图片，第二个背景平铺的方式。
- image ：规定要使用的图片、画布或视频元素。
- repeat ：默认。该模式在水平和垂直方向重复。
- repeat-x ：该模式只在水平方向重复。
- repeat-y ：该模式只在垂直方向重复。
- no-repeat：该模式只显示一次（不重复）。

    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;//  把背景图设置给填充的样式
    ctx.fill();

案例15背景图填充.html

3.3 变换（重点）

3.3.1 缩放（重点）

scale() 方法缩放当前绘图，更大或更小
语法：context.scale(scalewidth,scaleheight)
- scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
- scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
  +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
案例16缩放案例.html

3.3.2 位移画布（重点）

ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
参数说明：
- x：添加到水平坐标（x）上的值
- y：添加到垂直坐标（y）上的值
发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。
案例： 17位移画布.html

3.3.3 旋转（重点）

context.rotate(angle); 方法旋转当前的绘图
注意参数是弧度（PI）
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
案例：18旋转画布.html

3.3 绘制环境保存和还原（重要）

ctx.save() 保存当前环境的状态
- 可以把当前绘制环境进行保存到缓存中。
ctx.restore() 返回之前保存过的路径状态和属性
- 获取最近缓存的ctx
一般配合位移画布使用。
案例： 19矩形旋转案例.html

3.4 设置绘制环境的透明度（了解）

context.globalAlpha=number;
number:透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间。
设置透明度是全局的透明度的样式。注意是全局的。

3.5 画布限定区域绘制（了解）

ctx.clip(); 方法从原始画布中剪切任意形状和尺寸
一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
一般配合绘制环境的保存和还原。

3.6 画布保存base64编码内容（重要）

把canvas绘制的内容输出成base64内容。
语法：canvas.toDataURL(type, encoderOptions);
例如：canvas.toDataURL("image/jpg",1);
参数说明：
- type，设置输出的类型，比如 image/png image/jpeg等
- encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。

    案例1：
    var canvas = document.getElementById("canvas");
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
    // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

    var img = document.querySelector("#img-demo");//拿到图片的dom对象
    img.src = canvas.toDataURL("image/png");      //将画布的内容给图片标签显示

3.7 画布渲染画布（重要）

context.drawImage(img,x,y);
img参数也可以是画布，也就是把一个画布整体的渲染到另外一个画布上。

    var canvas1 = document.querySelector('#cavsElem1');
    var canvas2 = document.querySelector('#cavsElem2');
    var ctx1 = canvas1.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
    ctx1.fillRect(20, 20, 40, 40);      //在第一个画布上绘制矩形

    ctx2.drawImage(canvas1, 10, 10);    //将第一个画布整体绘制到第二个画布上

3.8 了解：线条样式（了解）

lineCap 设置或返回线条的结束端点(线头、线冒)样式
- butt ：默认。向线条的每个末端添加平直的边缘。
  - 翻译.：屁股；烟头；笑柄；靶垛；粗大的一端英 [bʌt] 美 [bʌt]
- round ：向线条的每个末端添加圆形线帽。
- square：向线条的每个末端添加正方形线帽。

Paste_Image.png

lineJoin 设置或返回两条线相交时，所创建的拐角类型
- bevel: 创建斜角。
  - 翻译. 斜角；斜面；[测] 斜角规英 ['bev(ə)l] 美 ['bɛvl]
- round: 创建圆角。
- miter: 默认。创建尖角

Paste_Image.png

lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
- 意思: 斜接英 ['maɪtə]
- 斜接长度指的是在两条线交汇处内角和外角之间的距离。
- 一般用默认值：10就可以了。除非需要特别长的尖角时，使用此属性。

Paste_Image.png

3.9 了解贝塞尔曲线（知道有）

3.9.1 绘制一条二次方曲线。

微软的画图板中的曲线的颜色。
quadratic：二次方的意思，英 [kwɒ'drætɪk] 美 [kwɑ'drætɪk]
Curve：曲线的意思，英 [kɜːv] 美 [kɝv]
语法： context.quadraticCurveTo(cpx,cpy,x,y);
参数：
- cpx：贝塞尔控制点的 x 坐标
- cpy：贝塞尔控制点的 y 坐标
- x ：结束点的 x 坐标
- y ：结束点的 y 坐标

Paste_Image.png

    ctx.beginPath();
    ctx.moveTo(20,20);
    //绘制2次方曲线，贝赛尔曲线
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

3.9.2 绘制贝塞尔曲线（知道有）

绘制一条三次贝塞尔曲线
语法：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
参数说明：
- cp1x：第一个贝塞尔控制点的 x 坐标
- cp1y：第一个贝塞尔控制点的 y 坐标
- cp2x：第二个贝塞尔控制点的 x 坐标
- cp2y：第二个贝塞尔控制点的 y 坐标
- x: 结束点的 x 坐标
- y: 结束点的 y 坐标

//绘制复杂的贝塞尔曲线
ctx.beginPath();
ctx.moveTo(400,400);
//参数说明：context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
// cp1x： 第一个贝塞尔控制点的 x 坐标
// cp1y： 第一个贝塞尔控制点的 y 坐标
// cp2x： 第二个贝塞尔控制点的 x 坐标
// cp2y： 第二个贝塞尔控制点的 y 坐标
// x: 结束点的 x 坐标
// y: 结束点的 y 坐标
ctx.bezierCurveTo(500, 200, 600, 600, 700, 300);
ctx.stroke();

案例：25绘制贝塞尔曲线.html

Paste_Image.png

3.10了解创建两条切线的弧（知道有）

在画布上创建介于当前起点和两个点形成的夹角的切线之间的弧
语法： context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
例如： ctx.arcTo(240, 100, 240, 110, 40);
参数：
- x1: 弧的端点1的 x 坐标
- y1: 弧的端点1的 y 坐标
- x2: 弧的端点2(终点)的 x 坐标
- y2: 弧的端点2(终点)的 y 坐标
- r : 弧的半径

//代码demo：
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,100);
//context.arcTo(x1,y1,x2,y2,r); //类比：css3中的圆角。
ctx.arcTo(240, 100, 240, 110, 40);
ctx.lineTo(240, 300);
ctx.stroke();

Paste_Image.png

3.11了解判断点是否在路径中（知道有）

context.isPointInPath(x,y);
//isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
//判断x,y坐标的点是否在当前的路径中。

3.12了解文本宽度计算（知道有）

context.measureText(text).width;

3.13 如果以后做canvas游戏方向开发深入学习可以扩展内以下容：

setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
transform() 替换绘图的当前转换矩阵
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
像素操作

四、 Canvas开发库封装

4.1封装常用的绘制函数

4.1.1封装一个矩形

//思考：我们用到的矩形需要哪些绘制的东西呢？
1、矩形的 x、y坐标
2、矩形的宽高
3、矩形的边框的线条样式、线条宽度
4、矩形填充的样式
5、矩形的旋转角度
6、矩形的缩小放大
//下面是把上面所有的功能进行封装的代码：
function ItcastRect( option ) {//矩形构造函数
    this._init(option);
}
ItcastRect.prototype = {  //矩形的原型对象
    _init: function( option ) {  //初始化方法
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
    },
    render: function( ctx ) {//把矩形渲染到canvas中
        ctx.save();
        ctx.translate( this.x, this.y );//位移画布
        ctx.rotate( this.angle * Math.PI / 180 );//旋转角度
        ctx.scale( this.scaleX, this.scaleY );//缩放
        ctx.fillStyle = this.fillStyle;
        ctx.fillRect( 0, 0, this.w, this.h ); //填充矩形
        ctx.lineWidth = this.strokeWidth;     //线宽
        ctx.strokeStyle = this.strokeStyle;   //填充样式
        ctx.strokeRect( 0,0,this.w,this.h );  //描边样式
        ctx.restore();
    },
    constructor: ItcastRect
};

4.1.2作业：尝试着封装一个圆形？

//封装圆形的代码的答案：不要偷看
function ItcastCircle( option ) {
    this._init( option );
}
ItcastCircle.prototype = {
    _init: function( option ) {
        option = option || {};
        this.x = option.x === 0 ? 0 : option.x || 100;
        this.y = option.y === 0 ? 0 : option.y || 100;
        this.w = option.w || 100;
        this.h = option.h || 100;
        this.angle = option.angle === 0 ? 0 : option.angle || 0;
        this.fillStyle = option.fillStyle || 'silver';
        this.strokeStyle = option.strokeStyle || 'red';
        this.strokeWidth = option.strokeWidth || 4;
        this.scaleX = option.scaleX || 1;
        this.scaleY = option.Y || 1;
        this.opactity = option.opactity || 1;
        this.counterclockwise = 
            option.counterclockwise === true ? true : option.counterclockwise || false;
        this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;
        this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;
        this.startAngle = this.startAngle * Math.PI/180;
        this.endAngle = this.endAngle * Math.PI / 180;
        this.r = option.r || 100;
    },
    render: function( ctx ) {
        ctx.save();
        ctx.translate( this.x, this.y);
        ctx.scale( this.scaleX, this.scaleY );
        ctx.rotate( this.agnle * Math.PI / 180 );
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.fillStyle;
        ctx.strokeStyle = this.strokeStyle;
        ctx.moveTo(0, 0);
        ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    },
    constructor: ItcastCircle
};

4.2 第三方库使用

Rgraph vs 百度的echart

https://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

国产的egret引擎

 http://www.egret-labs.org/

比较火的3d引擎：treejs

http://threejs.org/

Konva

官网：http://konvajs.github.io/
    特点：
     * 小巧、使用方便、适合移动端和pc端
     * 支持丰富的事件处理操作
     * 支持类似JQuery的操作方式（顺带能复习jQueyr）
     * 开源，可以随意更改
     * 社区更新比较活跃，github托管源码
     * 性能也不错

其他的还有很多，希望以后能用到你们的库。

五、Konva的使用快速上手

5.1 Konva的整体理念

舞台的概念的引入。整个视图看做是一个舞台 stage
舞台中可以绘制很多个层 layer
layer下面可以有很多的group
group下面可以有矩形、图片、其他形状等
参看：快速上手文档---查看翻译文档

                  Stage
                    |
             +------+------+
             |             |
           Layer         Layer
             |             |
       +-----+-----+     Shape
       |           |
     Group       Group
       |           |
       +       +---+---+
       |       |       |
    Shape   Group    Shape
               |
               +
               |
             Shape

5.2 Konva矩形案例

5.2.1 创建一个矩形： Konva.Rect(option);

    //Konva使用的基本案例
    //第一步：创建舞台
    var stage = new Konva.Stage({
        container: 'container',     //需要存放舞台的Dom容器
        width: window.innerWidth,   //设置全屏
        height: window.innerHeight
    });

    //第二步：创建层
    var layer = new Konva.Layer();  //创建一个层
    stage.add(layer);               //把层添加到舞台

    //第三步： 创建矩形
    var rect = new Konva.Rect({     //创建一个矩形
        x: 100,                     //矩形的x坐标，相对其父容器的坐标
        y: 100,                      
        width: 100,                 //矩形的宽度
        height: 100,                //矩形高度
        fill: 'gold',               //矩形填充的颜色
        stroke: 'navy',             //矩形描边的颜色
        strokeWidth: 4,             //填充宽度
        opactity: .2,               //矩形的透明度
        scale: 1.2,                 //矩形的缩放 1：原来大小
        rotation: 30,               //旋转的角度，是deg不是弧度。
        cornerRadius: 10,           //圆角的大小（像素） 
        id: 'rect1',                //id属性，类似dom的id属性
        name: 'rect',
        draggable: true             //是否可以进行拖拽
    });

    //创建一个组
    var group = new Konva.Group({
        x: 40,      
        y: 40,
    });
    group.add( rect );  //把矩形添加到组中
    
    //第四步： 把形状放到层中
    layer.add( group ); //把组添加到层中
    layer.draw();       //绘制层到舞台上

5.3 Konva的动画系统

5.3.1 tween对象(重点)

tween，英文意思：两者之间，英 [twiːn] 美 [twin]
tween是控制Konva对象进行动画的核心对象。
tween可以控制所有数字类型的属性进行动画处理，比如：x, y, rotation,
width, height, radius, strokeWidth, opacity, scaleX等

//案例：
var tween = new Konva.Tween({
    node: rect,             //要进行动画的Konva对象
    x: 300,                 //要进行动画的属性
    opacity: .8,            
    duration: 1,            //持续时间
    easing: Konva.Easings.EaseIn, //动画的动画效果
    yoyo: true,             //是否进行循环播放的设置
    onFinish: function() {
        //动画执行结束后，执行此方法
    }
});

tween.play();   //启动动画

tween的控制方法
- tween.play(), //播放动画
- tween.pause(), //暂停动画
- tween.reverse(), //动画逆播放
- tween.reset(), //重置动画
- tween.finish(), //立即结束动画
- seek：英文：寻找英 [siːk] 美 [sik]
tween的缓动控制选项
- Konva.Easings.Linear //线性
- Konva.Easings.EaseIn //缓动，先慢后快
- Konva.Easings.EaseOut //先快后慢
- Konva.Easings.EaseInOut //两头慢，中间快
- Konva.Easings.BackEaseIn //往回来一点，然后往前冲，汽车启动类似...
- Konva.Easings.BackEaseOut
- Konva.Easings.BackEaseInOut
- Konva.Easings.ElasticEaseIn //橡皮筋英 [ɪ'læstɪk] 美 [ɪ'læstɪk]
- Konva.Easings.ElasticEaseOut
- Konva.Easings.ElasticEaseInOut
- Konva.Easings.BounceEaseIn //弹跳；弹起，反跳；弹回英 [baʊns] 美 [baʊns]
- Konva.Easings.BounceEaseOut
- Konva.Easings.BounceEaseInOut
- Konva.Easings.StrongEaseIn //强力
- Konva.Easings.StrongEaseOut
- Konva.Easings.StrongEaseInOut
动画效果参考： 29Konva动画缓动效果案例.html

5.3.2 动画to的使用

to就是对tween的封装，比较简单好用。

    //案例：
    var rect = new Konva.Rect({
        x: 10,
        y: 10,
        width: 100,
        height: 100,
        fill: 'red'
    });
    layer.add(rect);
    layer.draw();

    //动画系统
    rect.to({
        x: 100,
        y: 100,
        opactity: .1,
        duration: 3,
        onFinish: function() {

        }
    });

    //to: 就是对tween的简单应用。

5.3.3 Animate的应用

Animation动画，实际上就是浏览器通知开发者进行绘制，并提供当前的时间

    var anim = new Konva.Animation(function(frame) {
        //动画系统提供的frame有三个属性可以使用：
        var time = frame.time, // 动画执行的总时间
            timeDiff = frame.timeDiff, // 距离上一帧的时间
            frameRate = frame.frameRate; // 帧率（既1000/间隔时间）
       
       //动画的动作

    }, layer);
    
    anim.start();//启动动画

    //anim.stop();//结束动画

5.3.4 循环播放动画的实现

    //总体思路，使用tween 配合onFinish事件中重新播放动画，达到循环播放的效果
    var loopTween = new Konva.Tween({
        node: star, //设置要表现动画的 Konva对象
        rotation: 360,  //旋转360度
        duration: 2,    //动画持续时间
        easing: Konva.Easings.Linear,
        onFinish: function() {
            // this === loopTween //true
            this.reset();//重置动画
            this.play(); //重新播放动画
        }
    });
    loopTween.play();

5.3.5 回放且循环播放动画

yoyo属性可以进行对动画进行播放完后，回放当前动画，并持续循环来回切换播放。

    rect.to({
        duration: 2,
        scale: 1.5,
        yoyo: true// 此设置也可以用于 tween
    });

5.3.6 进度条案例

5.3.7 传智官网案例

三角函数的补充
- Math.sin(弧度); //夹角对面的边和斜边的比值
- Math.cos(弧度); //夹角侧边与斜边的比值
圆形上面的点的坐标的计算公式
- x =x0 + Math.cos(rad) * R;//x0和y0是圆心点坐标
- y =y0 + Math.sin(rad) * R;//注意都是弧度

Paste_Image.png

group的灵活运用
- konva的group很灵活，每个group都有自己的坐标系
- group可以包含其他的group，可以对group做整个组的动画
- group可以通过getChidren();//可以拿到直接子级元素。

    var group = new Konva.Group({
        x: 0,
        y: 0
    });
    group.add(rect);

5.4 Konva的事件（重要）

    var rect = new Konva.Rect({
        x: 100,
        y: 100,
        fill: 'red',
        width: 200,
        height: 200
    });

    //绑定事件 Konva支持事件：mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, mousewheel, click, dblclick, dragstart, dragmove, and dragend

    rect.on('click', function(){   //jQuery一模一样！！
        console.log('^_^  ^_^');
    });

    //绑定多个事件
    rect.on('click mousemove',function(e){

    });

    //解除绑定事件
    rect.off('click');             //这不是jQuery吗？

    //触发事件
    rect.fire('click');

    //取消事件冒泡
    rect.on('click', function(evt) {
      alert('You clicked the circle!');
      evt.cancelBubble = true;      //取消事件冒泡
    });

5.5 Konva的选择器

选择方法。
- ID选择法：stage.find('#id'); //此方法返回的是一个数组
- name选择法：group.findOne('.name');//返回一个Konva对象
- type选择法： group.find('Circle');//查找所有的圆形Konva对象

    //组中查找圆形的Konva对象
    groupCircle.find('Circle').each(function( circle, index ){
        circle.setZIndex( 3 - index );
    });

5.6 饼状图案例

wedge: 楔形

5.7 柱状图案例

histogram n. [统计] 直方图；柱状图英 ['hɪstəgræm] 美 ['hɪstəɡræm]

六、Canvas项目实战

七、Canvas优化

 <!-- requestAnim shim layer by Paul Irish -->
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

var canvas, context, toggle;

init();
animate();

function init() {

    canvas = document.createElement( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;

    context = canvas.getContext( '2d' );

    document.body.appendChild( canvas );

}

function animate() {
    requestAnimFrame( animate );
    draw();

}

function draw() {

    var time = new Date().getTime() * 0.002;
    var x = Math.sin( time ) * 192 + 256;
    var y = Math.cos( time * 0.9 ) * 192 + 256;
    toggle = !toggle;

    context.fillStyle = toggle ? 'rgb(200,200,20)' :  'rgb(20,20,200)';
    context.beginPath();
    context.arc( x, y, 10, 0, Math.PI * 2, true );
    context.closePath();
    context.fill();

}

会员力量，点亮园子希望

刷新页面返回顶部

编程成长之路

公告

HTML5网页游戏开发

HTML概述

HTML基础

标签

HTML5用

网页基本标签

图像标签

链接标签

页面间链接

锚链接

功能性链接

表格标签

媒体标签

iframe内联框架

表单标签（重点）

文本框和单选框

多选框和按钮

增强鼠标可用性

列表框、文本域和文件域

简单验证、滑块和搜索框

表单的应用

表单的初级验证

HTML5调用Javascript

CSS笔记

1.什么是CSS

1.1 什么是CSS

1.2 快速入门

行内样式

内部样式

外部样式（推荐使用）

优先级：就近原则

1.3 CSS的优势

2.选择器（重要）

2.1基本选择器（重要）

标签选择器

类选择器 class

id选择器

优先级

2.2层次选择器

后代选择器

子选择器

相邻兄弟选择器

通用兄弟选择器

2.3结构伪类选择器

2.4属性选择器（重要）

3.美化网页元素

3.1 为什么要美化页面

3.2 字体样式

3.3文本样式

3.4 超链接伪类

3.5 文本阴影

3.6 列表

3.7 背景

3.8 渐变色

4.盒子模型

4.1 什么是盒子模型

4.2 边框

4.3 内外边距

4.4 圆角边框

4.5 盒子阴影

5.浮动

5.1 标准文档流

5.2 display

5.3 float

5.4 父级边框塌陷的问题

6.定位

6.1 相对定位

6.2 绝对定位

6.3 z-index

6.4 背景透明度

一、canvas简介

1.1 什么是canvas？（了解）

1.2 canvas主要应用的领域（了解）

二、canvas绘图基础

canvas绘图 html中的基本结构以及调用外部js文件方法

2.0 sublime配置canvas插件（推荐）

2.1 Canvas标签

2.1.1 canvas标签语法和属性 （重点）

2.1.1 canvas标签语法和属性（重点）

2.5.1 绘制上下文的文字属性（有印象就行了）

2.6 绘制图片（drawImage）（重点）

3.2.2 设置圆形渐变（径向渐变）了解