【canvas】基础练习一图形

Demo1【绘制一条线】

【canvas】基础练习一图形-LMLPHP

<!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【改变线帽样式】

【canvas】基础练习一图形-LMLPHP

<!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【绘制矩形】

【canvas】基础练习一图形-LMLPHP

<!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【圆形】

【canvas】基础练习一图形-LMLPHP

<!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【圆角矩形】

【canvas】基础练习一图形-LMLPHP

<!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【擦除】

【canvas】基础练习一图形-LMLPHP

<!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】

【canvas】基础练习一图形-LMLPHP

<!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】

【canvas】基础练习一图形-LMLPHP

<!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指定绘制区域】

【canvas】基础练习一图形-LMLPHP

<!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>

canvas

【canvas】基础练习一 图形

Demo1【绘制一条线】

Demo2【改变线帽样式】

demo3【绘制矩形】

demo4【圆形】

demo5【圆角矩形】

demo6【擦除】

demo7【二次贝尔曲线quadraticCurveTo】

demo8【三次贝尔曲线bezierCurveTo】

demo9【clip指定绘制区域】

【canvas】基础练习一图形