HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zuosixiaonengshou/article/details/72633187

绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图。本次将要学习一种新的灰土方法——使用Canvas元素,它是基于HTML5原生的绘图功能。使用Canvas元素,可以绘制图形,也可以实现动画。它方便了使用JavaScript脚本的前端开发人员,寥寥数行代码,就可以在Canvas元素中实现各种图像及动画。

Canvas基本知识

构建Canvas元素

非常简单

<canvas id="canvas" width="200" height="200">你的浏览器不支持该功能!</canvas>

使用JavaScript实现绘图的流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>初识canvas</title>
		<style type="text/css">
			canvas{
				border: 1px solid #ccc; //设置canvas标签的边框样式
			}
		</style>
		<script type="text/javascript">
			function DrawText(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				//设置字体样式、颜色及对齐方式
				context.font="98px 黑体";
				context.fillStyle="#036";
				context.textAlign="center";
				//绘制文字
				context.fillText("囧",100,120,200);
			}
			window.addEventListener("load",DrawText,true);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="200" height="200">你的浏览器不支持该功能!</canvas>
	</body>
</html>

其实学习起来还是挺容易上手的。


使用Canvas绘图

绘制矩形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制一个黄色的矩形,边框为黑色</title>
		<style type="text/css">
			canvas{
				border: 1px solid #000; //设置canvas标签的边框样式
			}
		</style>
		<script type="text/javascript">
			function DrawRect(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				//绘制矩形边框
				context.strokeStyle="#000";  //设置边框颜色
				context.lineWidth=1;   //设置边框宽度
				context.strokeRect(50,50,150,100); //绘制矩形边框 strokeRect(x,y,width,height)
				//填充矩形形状
				context.fillStyle="#f90";  //设置填充颜色
				context.fillRect(50,50,150,100);
				
				//擦除指定的矩形区域
				context.clearRect(60,60,100,50);
			}
			window.addEventListener("load",DrawRect,true);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="200" height="200">你的浏览器不支持该功能!</canvas>
	</body>
</html>

在Canvas中绘制矩形边框及填充效果和擦除效果



使用路径

绘制一个圆形和矩形叠加的图形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制一个黄色的矩形,边框为黑色</title>
		<style type="text/css">
			canvas{
				border: 1px solid #000; //设置canvas标签的边框样式
			}
		</style>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");

				context.beginPath(); //创建绘图路径 创建一个新的路径 
				 //圆形路径arc(x,y,radius,startAngle,endAngle,counterclockwise)
				 // x,y圆心坐标,radius半径,startAngle、endAngle开始点和结束点的角度,counterclockwise为true逆时针,false顺时针
				context.arc(150,100,50,0,Math.PI*2,true);
				context.rect(50,50,100,100); //矩形路径
				context.closePath(); //关闭当前路径
				
				context.strokeStyle="#000"; //边框颜色
				context.lineWidth=3; // 边框宽度
				context.fillStyle="#f90"; //填充颜色
				
				context.stroke(); //绘制边框
				context.fill();//填充区域
				
				/*
				   圆形和矩形的重叠部分是空白,并没有进行填充。原因是:
				   	填充的部分为矩形和圆形之间的区域,而这部分区域正是路径所确定的区域。
				   	    即可以这样理解,当两个图形路径重叠时,重叠区域则被排除在路径确定的区域之外
				*/
				
			}
			window.addEventListener("load",Draw,true);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="200" height="200">你的浏览器不支持该功能!</canvas>
	</body>
</html>

圆形和矩形叠加效果



深入理解路径特性

beginPath()方法的作用

function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//绘制第一圆
				context.beginPath();
				context.arc(150,100,50,0,Math.PI*2,true);
				context.fillStyle="rgba(255,135,0,0.4)";
				context.fill();
				
				//绘制第二个圆
				context.beginPath();
				context.arc(170,120,50,0,Math.PI*2,true);
				context.fillStyle="rgba(255,135,0,0.4)";
				context.fill();
			}	

绘制的两个半透明的圆形



closePath()的作用

绘制两条直线

//绘制两条直线(闭合路径)
			function DrawLine(){
				var canvas=document.getElementById("canvas2");
				var context=canvas.getContext("2d");
				
				context.beginPath();
				context.moveTo(50,50);
				context.lineTo(120,120);
				context.lineTo(120,60);
				//自动用一条直线连接路径设置的起始点。习惯放在最后一步,但不是路径设置的结束,还可以继续设置
				context.closePath();
				context.strokeStyle="#000";
				
				context.stroke();
			}
			window.addEventListener("load",DrawLine,false);
			//绘制两条直线(开放路径)
			function DrawLine2(){
				var canvas=document.getElementById("canvas3");
				var context=canvas.getContext("2d");
				
				context.beginPath();
				context.moveTo(50,50);
				context.lineTo(120,120);
				context.lineTo(120,60);
				//context.closePath();
				context.strokeStyle="#000";
				
				context.stroke();
			}
			window.addEventListener("load",DrawLine2,false);


左是有closePath()方法,右边没有


图形组合

通常,把一个图形绘制在另一个图形之上,称之为图形组合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			//图形组合  globalCompositeOperation=[value] value的合法值有12个,决定了12种图形组合类型
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				//source-over 默认值
				context.globalCompositeOperation="source-over";
				RectArc(context);
				//lighter
				context.globalCompositeOperation="lighter";
				context.translate(90,0); //重新映射画布上的 (0,0) 位置。
				RectArc(context);
				//xor
				context.globalCompositeOperation="xor";
				context.translate(-90,90);
				RectArc(context);
				//destination-over
				context.globalCompositeOperation="destination-over";
				context.translate(90,0);
				RectArc(context);
			}
			//绘制组合图形
			function RectArc(context){
				context.beginPath();
				context.rect(10,10,50,50);
				context.fillStyle="#F90";
				context.fill();
				context.beginPath();
				context.arc(60,60,30,0,Math.PI*2,true);
				context.fillStyle="#of0";
				context.fill();
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
	</body>
</html>

多样化的图形组合



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页