HTML5中canvas标签的几种基础用法的介绍以及一些案例

1.canvas的基础知识

2.canvas绘制矩形

3.canvas绘制圆形

4.使用moveTo()和lineTo()绘制路径

一) canvas基础

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。

但绘制图形，并不是指使用鼠标作画，而是需要javascript进行配合。创建canvas的时候，他默认的宽高为300px*150px。

<canvas id="canvas">只是一个canvas标签而已</canvas>

二) 绘制矩形

我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。

<canvas id="canvas" width="400" height="300">我是一个画布</canvas>

那么，我们想在canvas上面画出矩形，我们就需要认识以下几种api

方法	描述
getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形

</script>

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.strokeRect(50,50,100,100)//绘制填充的"黑色"的矩形

</script>

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillRect(50,50,100,100)//绘制填充的"黑色"的矩形

ctx.clearRect(50,50,10,10)//清除"x=50,y=50,宽度为10,高度为10的区域"

</script>

但有些时候，我们希望能够修改矩形的样式，又不可以直接通过修改css方式来修改。那么在canvas中也提供了api为我们来修改样式。

方法	描述
fillStyle	填充背景颜色
strokeStyle	设置边框颜色
lineWidth	设置边框的宽度

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.fillStyle = "red"//绘制填充的"红色"的矩形

ctx.fillRect(50,50,100,100)

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.strokeStyle = "red"//绘制边框的"红色"的矩形

ctx.lineWidth = "10"//设置边框宽度

ctx.strokeRect(50,50,100,100)

---------下面是绘制矩形的案例以及代码显示-----------

效果如下：

---------代码如下：-----------

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绘制一个矩形</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			body{
				width: 100%;
				height: 100%;
				
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="800" height="400">
			我是一个canvas
		</canvas>
		
		<script>
			
			var oC=document.getElementById("canvas")
			var oGc=oC.getContext("2d")
			
			oGc.fillRect(50,50,100,100)
			oGc.strokeRect(200,50,100,100)
			oGc.strokeRect(400,50,100,100)
			oGc.fillRect(50,200,100,100)
			
			oGc.clearRect(100,100,10,10)
			
			
		</script>
	</body>
</html>

三) canvas绘制圆形

我们来看下如何在canvas中绘制一个圆形，绘制圆形分为4个步骤。

1) 开始绘制路径(beginPath)

2) 创建图像路径

3) 路径创建完成后，关闭路径

4) 设定绘制样式，调用绘制方法，绘制路径(closePtah)

绘制圆形,canvas也为我们提供了arc这个方法,

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

该方法有6个参数，x为绘制圆形的起点横坐标，y表示绘制圆形的起点的纵坐标,radius表示圆的半径，startAngle为开始角度，endAngle为结束的角度, anticlockwise是否按照顺时针方向进行绘制。false表示顺时针。（默认为顺时针）。

var canvas = document.getElementById("canvas")

var ctx = canvas.getContext("2d")//获取绘制图片的"2d"环境

ctx.beginPath()

ctx.arc(100,100,50,0,90*Math.PI/180,false)

ctx.stroke()

ctx.closePath()

其中有个弧度转换的公式：degreens*Math.PI/180，绘制圆形默认按照以下的位置进行切换。

---------下面是绘制圆形的案例以及代码显示-----------

效果如下：所示是一火柴人，其头部和左眼便是一个绘制的圆。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>slime</title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			body{
				width: 100%;
				height: 100%;
				
			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="800" height="400">
				我是一个canvas
			</canvas>
			
		</div>
		
		<script>
			
			var oC=document.getElementById("canvas")
			var oGc=oC.getContext("2d")
			
			//头
			oGc.beginPath()
			oGc.arc(100,100,100,0,360*Math.PI/180,false)
			oGc.closePath()
			oGc.stroke()
			
			//左眼
			oGc.beginPath()
			oGc.arc(60,70,10,0,360*Math.PI/180,false)
			oGc.closePath()
			oGc.fill()
			
			//右眼
			oGc.beginPath()
			oGc.arc(130,70,10,10,360*Math.PI/180,false)
			oGc.closePath()
			oGc.fill()
			
			//嘴巴
			oGc.beginPath()
			oGc.arc(95,120,30,1,90*Math.PI/180,false)
			oGc.closePath()
			oGc.stroke()
			
			//身体
			oGc.beginPath()
			oGc.fillRect(35,200,125,125)
			oGc.closePath()
			
			//左脚
			oGc.beginPath()
			oGc.moveTo(50,300)
			oGc.lineTo(250,600)
			oGc.stroke()
			oGc.closePath()
			
			//右脚
			oGc.beginPath()
			oGc.moveTo(120,300)
			oGc.lineTo(200,500)
			
			oGc.stroke()
			oGc.closePath()
			
			//左手
			oGc.beginPath()
			oGc.moveTo(35,230)
			oGc.lineTo(5,280)
			oGc.stroke()
			oGc.closePath()
			
			//右手
			oGc.beginPath()
			oGc.moveTo(160,230)
			oGc.lineTo(195,280)
			oGc.stroke()
			oGc.closePath()
			
		</script>
	</body>
</html>

四) 使用moveTo()和lineTo()绘制路径

我们可以使用moveTo()和lineTo()绘制直线，或者是自己想要的图形，不局限于矩形。

方法	描述
moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。
linejoin	设置两线段连接处所显示的样子。round,bevel,miter
lineCap	线段端点显示的样式
save	保存绘画路径
restore	销毁路径

注意:我们使用两个方法的时候，要注意使用closePath()闭合。因为它会通知canvas当前绘制的图形已经闭合或者形成了完全封闭。(linejoin)

-----------第四点的绘制直线路径的案例和参考代码可以参考第三点的小柴人的手和脚----------

本次分享就到这里了，谢谢。

HTML5中canvas标签的几种基础用法的介绍以及一些案例

猜你喜欢