本菜鸡又学了新东西！！！开心！！！！！！
于是我决定：第一时间写个博客记(xu)录(rong)一下
下面开始正文
预备知识：html5编程（这里不再赘述）
我们如果想要实现绘画功能，有几部分不可缺少：
监听器，画布（类似java的graphics类），图像类（类似java的JFrame）
图像类使用html5中的canvas标签
画布的建立必须经过如下步骤
1、 获取canvas的DOM对象，这是一个Canvas对象。
2、 调用该DOM对象的 getContext() 方法，该方法返回一个对应的 CanvasRenderingContext2D 对象，通过这个对象可以进行图像的绘制 （可以按JFrame与Graphics的关系理解，但有实质性不同）。
3、 调用CanvasRenderingContext2D对象的方法绘图。
代码如下（在body中）
<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>
<!--使用script创建脚本画布-->
<script type="text/javascript">
//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
var canvas = document.getElementById("haha")
//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
var c = canvas.getContext("2d");
</script>
监听器（这里监听的是点击事件）可以有两种办法：
1、使用canvas标签中的onClick属性
<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>
2、在script中定义事件函数
<!--使用script创建脚本画布-->
<script type="text/javascript">
var canvas = document.getElementById("haha")
//然后定义事件函数
canvas.addEventListener('click',clicked(){
//函数内容
});
</script>
这样我们就可以集齐画图所需条件，开始画图啦！
我们在这里上手几个形状（直线，3/4圆，圆角矩形）
在CanvasRenderingContext2D中，我们画图的方法略有不同，都需要进行以下几步
1、 路径开始（beginPath()）
2、 路径操作
3、 路径结束（endPath()）
对应代码为
//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
//路径开始
c.beginPath();
//路径操作
......
//路径结束
c.endPath();
如果想要改变路径和填充的颜色与风格，CanvasRenderingContext2D的fill与stroke满足你
对应代码为
//设置填充风格
c.fillStyle = "#00ffff";
//设置路径风格
c.strokeStyle = "#ff00ff";
//fill函数进行填充
c.fill();
//stroke函数绘制已定义的路径
c.stroke();
通过这种语句，我们明确的标示出画图路径的开始与结束
下面分别绘制直线，3/4圆与圆角矩形，代码如下，注释详细
1、直线
通过鼠标点击两次，我们实现第一次是起点，第二次是终点，并可以重复使用的目的
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>
<!--使用script创建脚本画布-->
<script type="text/javascript">
//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
var canvas = document.getElementById("haha")
//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
var c = canvas.getContext("2d");
//然后进行元素的加入
//首先我们确定风格
//设置路径风格
c.strokeStyle = "#ff00ff";
//然后设置鼠标点击事件
//在这里设置事件函数，并将其与canvas本身的onClick联系起来就可以实现鼠标点击事件的功能
//我们设置一个功能，即点击两个点可以产生这两个点之间的连线
//首先创建一个变量存储点的性质：奇数为起点，偶数为终点
var count = 1;
function clicked(){
//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
//如果count为奇数，取点，将其设置成起点
if(count % 2 == 1){
var x = event.x;
var y = event.y;
//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
//路径开始
c.beginPath();
//moveTo函数将路径移动到当前点
c.moveTo(x,y);
}
//如果count为偶数，取点，将其设置成终点
if(count % 2 == 0){
var x = event.x;
var y = event.y;
//画线！
c.lineTo(x,y);
//路径终止
c.closePath();
}
//stroke函数绘制已定义的路径
c.stroke();
//计数器增加
count++;
}
</script>
</body>
</html>
效果：
2、3/4圆
每次点击鼠标时画出一个3/4圆
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
<!--创建使用区域,其中onmouseup用于设置鼠标松开事件-->
<canvas width="1200px" height="1000px" id="haha" onmouseup="clicked()"></canvas>
<!--使用script创建脚本画布-->
<script type="text/javascript">
//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
var canvas = document.getElementById("haha")
//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
var c = canvas.getContext("2d");
//然后进行元素的加入
//首先我们确定风格
//设置路径风格
c.fillStyle = "#00ffff";
c.strokeStyle = "#ff00ff";
//然后设置鼠标松开事件
function clicked(){
//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
var x = event.x;
var y = event.y;
//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
//路径开始
c.beginPath();
//路径画圆,arc(x,y,r,sAngle,eAngle,counterclockwise)用法：x为圆的中心的 x 坐标，y为圆的中心的 y 坐标，r为圆的半径sAngle为起始角，以弧度计（弧的圆形的三点钟位置是 0 度），eAngle为结束角，以弧度计，counterclockwise可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。
c.arc(x,y,50,0,1.5*Math.PI,false);
//路径终止
c.closePath();
//fill函数填充路径
c.fill();
//stroke函数绘制已定义的路径
c.stroke();
}
</script>
</body>
</html>
（附：arc方法模式图）
效果：
3、圆角矩形
画出一个圆角矩形
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
<!--创建使用区域,其中onmouseup用于设置鼠标松开事件-->
<canvas width="1200px" height="1000px" id="haha" onmouseup="clicked()"></canvas>
<!--使用script创建脚本画布-->
<script type="text/javascript">
//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
var canvas = document.getElementById("haha")
//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
var c = canvas.getContext("2d");
//然后进行元素的加入
//首先我们确定风格
//设置路径风格
c.strokeStyle = "#ff00ff";
//然后设置鼠标松开事件
function clicked(){
//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
var x = event.x;
var y = event.y;
var r = 50;
var width = 200;
var height = 100;
//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
//路径开始
c.beginPath();
//moveTo函数将路径移动到当前点
// 移动到左上角非圆弧处
c.moveTo(x+r,y);
// 添加一条连接到右上角的线段
c.lineTo(x+width-r, y);
// 添加一段圆弧,arcTo(x1,y1,x2,y2,radius)，变量：从当前(moveTo)点到(x1,y1)有一条线，从(x1,y1)到(x2,y2)有一条线，这个圆弧是与这两条线相切，半径为radius的圆的一部分
c.arcTo(x + width , y, x + width, y + r, r);
// 添加一条连接到右下角的线段
c.lineTo(x + width, y + height - r);
// 添加一段圆弧，方法同上
c.arcTo(x + width, y + height , x + width - r, y + height , r);
// 添加一条连接到左下角的线段
c.lineTo(x + r, y + height);
// 添加一段圆弧，方法同上
c.arcTo(x, y + height , x , y + height - r , r);
// 添加一条连接到左上角的线段
c.lineTo(x , y + r);
// 添加一段圆弧，方法同上
c.arcTo(x , y , x + r , y , r);
//路径终止
c.closePath();
//stroke函数绘制已定义的路径
c.stroke();
}
</script>
</body>
</html>
（附：arcTo方法模式图）
效果：
更多内容请参考w3cschool相关内容
https://www.w3school.com.cn/tags/html_ref_canvas.asp
