HTML5：Canvas画布的简单使用

最新推荐文章于 2022-11-08 15:47:39 发布

温姑娘

最新推荐文章于 2022-11-08 15:47:39 发布

阅读量639

点赞数

分类专栏： HTML基础

本文链接：https://blog.csdn.net/wyxeainn/article/details/79173958

版权

HTML基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用Canvas时要使用<canvas></canvas>标签来定义一个画布。

但是在canvas上绘制各种东西，则需要javascript来实现。画布仅仅提供的是一个绘制的场所。

其width,height属性可以设置其水平方向的宽度和垂直方向的高度。

其中fillStyle属性，可以是CSS颜色，渐变，或者图案，其默认颜色为黑色。

画矩形：

调用方法：fillRect(x,y,width,height)

其中x,y是左上角坐标，width是矩形水平方向的宽度，height是矩形垂直方向的高度。单位都是像素。

<!doctype html>
<html>
	<head>
	
	</head>
	<body>
		
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.fillStyle = "blue";
			ctx.fillRect(20,20,200,200);
			//var img = new Image();
			//img.src = "mystar.jfif";
			//ctx.drawImage(img,0,0);
		</script>
	</body>
</html>

画线条：moveTo(x,y)定义线条开始坐标，lineTo(x,y)设置结束坐标，stroke()画线条方法。

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.moveTo(20,20);
			ctx.lineTo(200,200);
			ctx.stroke();
		</script>
	</body>
</html>

画圆：arc(x,y,r,start,stop)

x:圆心在x轴上的坐标

y:圆心在y轴上的坐标

r:半径长度。

start，起始角度，以弧度表示，圆心平行的右端为0度。

Stop:结束角度，以弧度表示。

Math.PI表示180度，画圆的方向是顺时针方向。

!doctype html>
<html>
	<head>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(200,200,150,0,Math.PI);
			ctx.stroke();
		</script>
	</body>
</html>

canvas绘制文本：

属性： font 定义字体。

FillText(text,x,y) 再canvas上绘制实心的文本

StrokeText(text,x,y) 再canvas上绘制空心的文本

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.font = "50px Plain";
			ctx.fillText("Hello World",100,100);
			ctx.strokeText("Hello World",100,200);
		</script>
	</body>
</html>

canvas渐变：渐变可以填充矩形，线条和文本等等。

CreateLinearGradient(x,y,x1,y1) – 创建线条渐变

CreateRadialGradient(x,y,r,x1,y1,r1) – 常见一个径向/圆渐变。

X:渐变的开始圆的x坐标

Y:渐变的开始圆的y坐标

r:开始圆的半径。

X1:渐变的结束圆的x半径

Y1:渐变的结束圆的y半径

AddColorStop()方法指定颜色停止，参数使用坐标来描述。使用渐变，

设置fillStyle 或 strokeStyle的值为渐变。然后绘制形状。

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			var grd = ctx.createLinearGradient(0,0,300,0);
			grd.addColorStop(0,"blue");
			grd.addColorStop(1,"red");
			ctx.fillStyle = grd;
			ctx.font = "50px Plain";
			ctx.fillText("Hello World",100,100);
			ctx.strokeText("Hello World",100,200);
		</script>
	</body>
</html>

绘制图片：

drawImage(image,x,y)

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<canvas id="myCanvas" width="1000" height="800" style="border:1px solid red;">
		</canvas>
		<script type="text/javascript">
			//先找到canvas元素
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			var img = new Image();
			img.src = "mystar.jfif";
			ctx.drawImage(img,0,0);
		</script>
	</body>
</html>