Demo1【绘制一条线】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo 1</title>
</head>
<body>
<canvas id="wapper" width="200" height="200"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.lineWidth = 10;/*设置线条宽度*/
_2d.strokeStyle = 'red';/*设置线条颜色*/
_2d.beginPath();/*创建新的路径*/
_2d.moveTo(10,10);/*将画笔光标移动到画布坐标10，10*/
_2d.lineTo(150,50);/*画一条线到150，50*/
_2d.stroke();/*绘制定义的路径*/
</script>
</body>
</html>
Demo2【改变线帽样式】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lineCap</title>
</head>
<body>
<canvas id="wapper" width="200" height="200"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.lineWidth = 20;/*设置线条宽度*/
_2d.strokeStyle = 'red';/*设置线条颜色*/
_2d.beginPath();
_2d.lineCap = 'butt';/*默认。向线条的每个末端添加平直的边缘。*/
_2d.moveTo(10,10);
_2d.lineTo(150,10);
_2d.stroke();
_2d.beginPath();
_2d.lineCap = 'round';/*向线条的每个末端添加圆形线帽。*/
_2d.moveTo(20,50);
_2d.lineTo(150,50);
_2d.stroke();
_2d.beginPath();
_2d.lineCap = 'square';/*向线条的每个末端添加正方形线帽。*/
_2d.moveTo(20,90);
_2d.lineTo(150,90);
_2d.stroke();
</script>
</body>
</html>
demo3【绘制矩形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>strokeRect</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
/*边框*/
_2d.beginPath();
_2d.lineWidth = 5;/*设置线条宽度*/
_2d.strokeStyle = 'red';/*设置线条颜色*/
_2d.strokeRect(10,10,200,50);/*strokeRect(起点x，起点y，矩形长，矩形宽)*/
/*实心*/
_2d.beginPath();
_2d.fillStyle = 'red';/*设置颜色*/
_2d.fillRect(10,100,100,50);/*fillRect(起点x，起点y，矩形长，矩形宽)*/
</script>
</body>
</html>
demo4【圆形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arc</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
/*边框*/
_2d.beginPath();
_2d.lineWidth = 2;
_2d.arc(100,100,50,0,360);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
_2d.stroke();
/*实心*/
_2d.beginPath();
_2d.fillStyle = 'red';/*设置颜色*/
_2d.arc(300,100,50,0,100*Math.PI/180,true);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
_2d.fill();
</script>
</body>
</html>
demo5【圆角矩形】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arcTo</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
/*边框*/
_2d.beginPath();
_2d.lineWidth = 2;
_2d.moveTo(10,10);
_2d.lineTo(100,10);
_2d.arcTo(150,10,150,100,50);/*添加一条圆弧 起点我理解为转角的xy坐标 终点我理解为结束的xy坐标 arcTo(弧的起点的 x 坐标，弧的起点的 y 坐标， 弧的终点的 x 坐标，弧的终点的 y 坐标，弧的半径)*/
_2d.lineTo(150,100);
_2d.stroke();
</script>
</body>
</html>
demo6【擦除】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clearRect</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.beginPath();
_2d.fillStyle='red';
_2d.fillRect(0,0,500,500);
_2d.clearRect(20,20,100,200);/*clearRect(x起始坐标，y起始坐标，宽，高)*/
</script>
</body>
</html>
demo7【二次贝尔曲线quadraticCurveTo】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二次贝尔曲线quadraticCurveTo</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500);
_2d.beginPath();
_2d.moveTo(20,20);
_2d.quadraticCurveTo(200,20,400,400);/*quadraticCurveTo(控制点x, 控制点y, 终点x, 终点y)*/
_2d.stroke();
</script>
</body>
</html>
demo8【三次贝尔曲线bezierCurveTo】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三次贝尔曲线bezierCurveTo</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500);
_2d.beginPath();
_2d.moveTo(20,20);
_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)*/
_2d.stroke();
</script>
</body>
</html>
demo9【clip指定绘制区域】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clip指定绘制区域</title>
</head>
<body>
<canvas id="wapper" width="500" height="500"></canvas>
<script>
var wapper = document.getElementById('wapper'),
_2d = wapper.getContext('2d');/*2d的绘制对象*/
_2d.arc(250,250,250,0,360*Math.PI/180);
_2d.clip();
_2d.beginPath();
_2d.fillStyle='#efefef';
_2d.fillRect(0,0,500,500);
_2d.beginPath();
_2d.moveTo(20,20);
_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y, 终点x, 终点y)*/
_2d.stroke();
</script>
</body>
</html>