目录
一、canvas画布
SVG矢量图：就是用标签代码来画图
canvas:是H5出的技术，用JS来画图 （ SVG和canvas都是代码）
img:是图片，是图片编码
1、canvas基本概念
canvas：画布，h5新标签；
canvas本身没有任何外观，只是在文档中创建了一个画板；
ie9之前的版本不支持canvas；
画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；如果再css里写了宽高也会覆盖canvas里的属性，只会可能会引起图片的失真
画布的
getContext()方法返回一个“绘制上下文”对象； 绝大多数的画布绘制API来自这个对象； 也就是说画布元素和他的上下文对象是两个完全不同的概念； 调用该方法时，传递的参数是“2d”，也就是getContext('2d')，可以在画布上绘制二维图像； 3d绘制就相对比较复杂了，具体实现还在规范中；getContext('2d')返回的是：CanvasRenderingContext2Dcanvas可以用于双屏互动、大数据页面（百度出的框架echarts）、游戏、广告、特效（五角星）
canvas属于图片，它自己有默认的宽高（300，150），如果在行内不写宽高用默认的，而且在css那边写宽高，就会压缩拉升，失真
如果自己定义写一个标签，比如：<hai>这是我自己写的，浏览器不认识我，就会把我当作一个文本标签显示</hai>
<canvas id="box" width="20" height="20"> 浏览器认识我，所以我这句话不会显示出来</canvas>
context 上下文（代码）：用的技术是由底层实现的，我们写的是上层代码，直接调用，使用下层代码
<canvas id="box" width="400px" height="400px"></canvas> <script> var canvas = document.querySelector("#box") var ctx = canvas.getContext("2d") </script>
2、画布的尺寸和坐标：
– 画布以左上角(0, 0)为坐标原点；
– 往右为X轴的坐标不断增大；
– 往下为Y轴的坐标不断增大；
3、绘制线段和填充多边形：
1.绘制线段的API是上下文对象的方法；
2.beginPath： 开始定义一条新的路径；
3.moveTo： 开始定义一条新的子路径，该方法确定了线段的起点；
4.lineTo： 将上面定义的线段起点和指定的新的点连接起来；
lineTo会把上一次的终点作为这一次的起点，如果没有上一次的终点，就没有这一次的起点（所以可以不同写moveTo）
5.到这里只是规划好了思路，还没有在画布上画出任何图形；
6.fill()： 填充区域，此时只是填充，起点和终点并没有连接起来；
7.closePath： 会把起点和终点连接起来；
8.stroke()： 开始绘制图形，当前路径下的所有子路经都会绘制出来；
9.如果要接着绘制新的路径，记得调用beginPath()方法
【 strokeStyle 】
4、矩形的绘制 和 填充
（1）rect()：在当前子路经添加一条弧线；
语法：context.rect(x,y,width,height);
四个参数： 起点坐标x,y：左上角坐标； 宽度width：矩形的宽度； 高度height：矩形的高度；
ctx.fillRect(200,200,300,400) //画一个带填充的矩形框，默认为黑色
（2）strokeRect()方法可以直接绘制一个矩形；
语法：context.strokeRect(x,y,width,height);
ctx.fillStyle="pink" //填充颜色
ctx.fill() //把闭合轨迹填充上颜色，默认是黑色。有一边没有封闭的也可以填充
5、曲线的绘制和填充
arc()：在当前子路经添加一条弧线；
语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。顺时针 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针（默认），true = 逆时针。 |
6、绘制文本信息
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
ctx.fillText("内容",200,200)
三个参数： 绘制的内容； 起点x坐标； 起点y坐标；
文本颜色使用fillStyle属性指定；
文本字体使用font属性指定，和CSS一致； ctx.font="20px weiruan"
textAlign属性指定水平方向对齐方式，可选值：start、left等，
textBaseline则指定垂直方向，可选值：top、hanging等，参考下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
@font-face {
font-family: daimeng;
src: url(./src/daimeng.ttf);
}
#box{
border: 1px gray solid;
}
</style>
<div style="font-family: daimeng;">你好</div>
<canvas id="box" width="1200" height="600">浏览器不支持 请升级浏览器</canvas>
<script>
window.onload=function(){
var box=document.querySelector("#box")
var ctx=box.getContext("2d")
ctx.font="10px daimeng"
ctx.textAlign="center"
ctx.textBaseline="bottom"
ctx.fillText(`这个文字是我绘制出来的这个文字是我绘制出来的`,300,100)
}
</script>
</body>
</html>7、图片
drawImage()：将原图片像素的内容复制到画布上；
第一个参数是源图片，可以是img元素或Image构造函数创建的屏幕外图片对象；
三个参数时： 指定图片绘制的x、y坐标；
五个参数时： 指定图片绘制的x、y坐标，以及图片的宽度、高度；
九个参数时： 裁剪的对象 裁剪的位置（x,y）; 裁剪的宽度和高度(w,h); 裁剪后图片绘制的位置(x,y); 图片显示出来的宽度和高度(w,h);
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
8、清除画布指定像素
clearRect() 方法清空给定矩形内的指定像素 ；
JavaScript 语法： context.clearRect(x,y,width,height);
| 参数 | 描述 |
|---|---|
| x | 要清除的矩形左上角的 x 坐标 |
| y | 要清除的矩形左上角的 y 坐标 |
| width | 要清除的矩形的宽度，以像素计 |
| height | 要清除的矩形的高度，以像素计 |
清除画板 还有一个方法：（利用的回档，因为回档必然引起重绘）
bacanvas的宽度重新设置一遍==> canvas.width=400 或者等于 canvas.width
自己实现案例：一张图片，鼠标放上去一个小正方形的滑块，滑块所在位置，就把那个地方的内容清除了
<!DOCTYPE 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">
<title></title>
</head>
<body>
<style>
#box {
border: 1px solid black;
}
</style>
<canvas id="box" width="600" height="600"></canvas>
<!-- 第一种 ：在canvas的右边会希纳是img，然后drawImage后也会在canvas里显示。同时有两张图片显示-->
<img src="./canvas-案例/img/25.jpg" alt="" id="img1">
<script>
//方法1
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d")
var img1 = document.querySelector("#img1")
img1.onload = function () {
console.log(1)
当ing把src的资源加载完毕了这个函数才会运行
ctx.drawImage(img1, 100, 100)
}
//方法2
window.onload = function () {
console.log(2)
//当浏览器的window加载完毕了这个函数才会运行
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d")
var img1 = document.querySelector("#img1")
ctx.drawImage(img1, 100, 100)
}
// console.log(document.body) //这个时候用不起，打不出body。因为在body里面
</script>
<!-- 第二种 ：此方法就不用写img标签了，在右边就不会多出一张图片，而且能在canvas上显示多张图片-->
<script>
var canvas = document.querySelector("#box")
var ctx = canvas.getContext("2d")
var img1=new Image()
img1.src="./canvas-案例/img/25.jpg"
img1.onload=function(){
ctx.drawImage(img1, 100, 100)
}
//可以加多张图片
var img2=new Image()
img2.src="./canvas-案例/img/头像.PNG"
img2.onload=function(){
ctx.drawImage(img2, 100, 100)
}
//加一个精灵图，让整个精灵图动起来
var img3 = new Image()
img3.src = "./canvas-案例/img/hui.PNG" //图片宽高：807 84
img3.onload = function () {
var i = 80.7
var n = 0
setInterval(() => {
n++
n=n%10 //10代表的是 图片里有10个小图片
ctx.clearRect(20,200,80,84)
//cx cy cw ch (剪图片的大小:cx和cy代表从图片哪个位置开始，cw和ch是代表取多大)
// dx dy dw dh（显示到屏幕上的位置:dx和dy表示将图片放在屏幕哪里，dw和dh表示让在多大的盒子里）
ctx.drawImage(img3, n*80.7, 0, 80.7, 84, 20, 200, 80.7, 84)
},200)
}
</script>
</body>
</html>