Canvas绘图基础

目录一、什么是Canvas？二、Canvas元素的定义（写在html文件的body中）三、使用JavaScript获取网页中的Canvas对象四、Canvas绘图（1）绘制直线（2）绘制矩形（3）绘制圆弧（4）填充和描边一、什么是Canvas？canvas就是画布，可以画线，图形，填充，图像绘制等操作。canvas不仅提供简单的二维矢量绘图，也提供三维绘图。二、Canvas元素的定义（写在html

幺妹儿儿

13030人浏览 · 2022-03-17 19:21:41

幺妹儿儿 · 2022-03-17 19:21:41 发布

一、什么是Canvas？

二、Canvas元素的定义（写在html文件的body中）

三、使用JavaScript获取网页中的Canvas对象

一、什么是Canvas？

canvas就是画布，可以画线，图形，填充，图像绘制等操作。

canvas不仅提供简单的二维矢量绘图，也提供三维绘图。

二、Canvas元素的定义（写在html文件的body中）

.............

</canvas>

id 是canvas元素的标识；
height是canvas画布的高度，单位为像素；
width是canvas画布的宽度，单位为像素。

三、使用JavaScript获取网页中的Canvas对象

获取对象的方法：document.getElementById(对象id)

获取canvas对象的2D绘图上下文：getContext（“2d”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas</title>
		<style type="text/css">
			body {
				background-color: antiquewhite;
			}

			#canvas {
				background-color: bisque;
				margin-top: 100px;
				margin-left: 200px;
			}
		</style>

	</head>
	<body>
		<canvas id="canvas" width="1000" height="500">
        <script>
		    var mycanvas = document.getElementById('canvas');
		    var context = mycanvas.getContext(‘2d’);
            ....
	    </script>
		</canvas>
	</body>
</html>

如图：body颜色为浅，画布颜色为深，圆圈圈住的为画布的（0,0）像素

四、Canvas绘图

（1）绘制直线

调用beginPath()方法，指示开始绘图路径： ctx.beginPath();
调用moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);
调用lineTo()方法绘制直线： ctx.lineTo(x,y);
调用stroke()方法，绘制图形的边界轮廓： ctx.stroke();
调用closePath()方法，指示闭合绘图路径: ctx.closePath();

注：x表示水平方向的像素点，y表示垂直方向的像素点，下图黑点用（x,y）表示成（4,3）

代码实例：

<script>
    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(100,200);
	ctx.lineTo(400,200);
	ctx.lineTo(250,400);
	ctx.closePath();
	ctx.strokeStyle="#000000";
	ctx.stroke();
</script>

效果如下图所示：

（2）绘制矩形

绘制矩形：rect(x,y,width,height)；

绘制矩形边框：strokeRect(x, y, width, height);

绘制填充矩形：fillRect(x, y, width, height);

擦除指定矩形区域：clearRect(x, y, width, height);

x:矩形左上角的X坐标；
y:矩形左上角的y坐标；
width:矩形的宽度；
height:矩形的高度

代码实例：

<script>
    var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");

	//rect()函数调用
	ctx.beginPath();
	ctx.rect(20,20,100,50);
	ctx.stroke();

	//strokeRect()函数调用
	ctx.strokeRect(200,20,150,60);

	//fillRect()函数调用
	ctx.fillRect(400,20,150,60);
</script>

效果如下图所示：

注：strokeRect()方法与rect()方法的区别在于调用strokeRect()方法时不需要使用beginPath()和stroke()即可绘图。

（3）绘制圆弧

arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

centerx,centery 圆弧中心点坐标
Radius 半径
startAngle 起始弧度
endAngle 终止弧度
antiClockwise 是否按逆时针方向绘图，是一个可选参数，默认为false（即顺时针方向绘图）
弧度 = 角度* ( Math.PI / 180 )

代码实例：

<script>
	var mycanvas=document.getElementById("canvas");
	var ctx=mycanvas.getContext("2d");
	//arc()函数调用
	ctx.beginPath();
	ctx.arc(100,150,70,0,90*Math.PI/180,true);
	ctx.stroke();
</script>

效果如下图所示：

注：起始弧度到终止弧度是顺时针计算的

（4）填充和描边

1.描边

strokeStyle指定描边颜色（三种颜色方式均可）

lineWidth指定描边宽度（像素为单位）

2.填充

fillStyle指定填充颜色（三种颜色方式均可）

代码实例：

<script>
	var mycanvas = document.getElementById("canvas");
	var ctx = mycanvas.getContext("2d");
	ctx.moveTo(20, 20);
	ctx.lineTo(100, 100);
	ctx.lineTo(100, 0);
	ctx.strokeStyle = "#0000FF";
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(120, 20);
	ctx.lineTo(200, 100);
	ctx.lineTo(200, 0);
	ctx.fillStyle = "pink";
	ctx.fill();
</script>

效果如下图所示：