html 画布——canvas标签基本实例_html图表标签conaver-优快云博客

本文链接：https://blog.youkuaiyun.com/tcbdbd/article/details/98472037

本文介绍了HTML5的canvas元素，用于在网页上进行动态图像绘制。通过JavaScript，可以实现线条绘制、图形创作、字体与图片操作、渐变效果、动态图像移动以及画布变换等功能。提供了7个基本实例，包括线条、图形、文字和图片的绘制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，元素本身并没有绘制能力（它仅仅是图形的容器）必须使用脚本来完成实际的绘图任务

实例1：
绘制线条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border:1px solid red;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");
				
				var ctx=canvas.getContext("2d");
				
				ctx.strokeStyle="red";
				ctx.lineWidth=20;
				ctx.lineCap="round";
				ctx.lineJoin="round";
				ctx.moveTo(30,30);
				ctx.lineTo(300,300);
				ctx.lineTo(30,300);
				ctx.stroke();
				
				ctx.beginPath();
				ctx.strokeStyle="blue";
				ctx.moveTo(400,20);
				ctx.lineTo(400,400);
				ctx.stroke();
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</body>
</html>

实例2：
绘制图形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border:1px solid red;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");
				var ctx=canvas.getContext("2d");
				
				ctx.strokeStyle="red";
				ctx.fillStyle="blue";
				
				ctx.arc(200,200,100,0,90/180*Math.PI,false);
				//ctx.stroke();
				ctx.closePath();
				ctx.fill();
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="400" height="400"></canvas>
	</body>
</html>

实例3：
绘制字体/图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border:1px solid red;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");
				var ctx=canvas.getContext("2d");
				
				/*ctx.strokeStyle="red";
				ctx.fillStyle="blue";
				ctx.font="100px 微软雅黑";
				
				var str="许昌";
				//ctx.strokeText(str,0,100);
				ctx.fillText(str,0,100);*/
				
				var img=new Image();
				img.src="image/16pic_5199192_b.jpg";
				img.onload=function(){
					ctx.drawImage(img,634,227,185,185,10,10,185*2,185*2);
				}
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="600" height="400"></canvas>
	</body>
</html>

实例4：
创建渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border: 1px solid #ccc;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");
				var ctx=canvas.getContext("2d");
				//线性渐变
				/*var mycolor=ctx.createLinearGradient(50,50,400,400);
				mycolor.addColorStop(0,"red");
				mycolor.addColorStop(0.5,"white");
				mycolor.addColorStop(1,"green");
				
				ctx.moveTo(50,50);
				ctx.lineTo(300,50);
				ctx.stroke();
				
				ctx.fillStyle=mycolor;
				
				ctx.fillRect(0,100,500,100);*/
				// 径向渐变
				var mycolor=ctx.createRadialGradient(250,250,1,250,250,200);
				mycolor.addColorStop(0,"blue");
				mycolor.addColorStop(1,"red");
				
				ctx.fillStyle=mycolor;
				
				ctx.arc(250,250,250,0,2*Math.PI);
				ctx.fill();
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</body>
</html>

实例5：
让图片动态移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border:2px solid #ccc;}
		</style>
		<script type="text/javascript">
			var t;
			var img;
			window.onload=function(){
			    
			    img =new Image();
				img.src="image/b2.jpg";
				img.onload=function(){
					t=window.setInterval(drawarc,100);	
				}
			}
			var x=0;
			var y=100;
			function drawarc(){
				var convas=document.getElementById("mycanvas");
				var ctx=convas.getContext("2d");
				/*ctx.strokeStyle="red";
				ctx.lineWidth=10;
				ctx.moveTo(10,10);
				x++;
				ctx.lineTo(x,y);
				ctx.stroke();
				if(x>400){
					window.clearInterval(t);
				}*/
				x+=2;
				//清除画布
				ctx.clearRect(0,0,500,500);			
				ctx.drawImage(img,x,y);
			    if(x>400){
					window.clearInterval(t);
				} 
			}
			
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</body>
</html>

实例6：
画布变换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mycanvas{border:1px solid red;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");
				var ctx=canvas.getContext("2d");
				ctx.strokeStyle="red";
				ctx.lineWidth=2;
				ctx.strokeRect(150,200,200,100);
				//缩放
				//ctx.scale(0.5,0.5);
				//旋转
				//ctx.rotate(-45/180*Math.PI);
				//平移画布，重新定义原点
				ctx.translate(250,250);
				ctx.translate(100,100);
				ctx.rotate(45/180*Math.PI);
				ctx.strokeStyle="blue";
				ctx.strokeRect(-100,-50,200,100);
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</body>
</html>

实例7：
把画布显示在一张图片上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0px; padding: 0px;}
			#mycanvas{border:1px solid red; margin: 100px;}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById("mycanvas");	
				var btn=document.getElementById("btnshow");
				btn.onclick=function(){
					var canvas=document.getElementById("mycanvas");	
					var url=canvas.toDataURL("jpg");
					var img=document.getElementById("myimg");
					img.src=url;
					
				}
				
				
				canvas.onclick=function(){
					var canvas=document.getElementById("mycanvas");
					var ctx=canvas.getContext("2d");
					ctx.beginPath();
					//alert(event.x+","+event.y);
					//alert(canvas.offsetLeft);
					var x=event.x-canvas.offsetLeft;
					var y=event.y-canvas.offsetTop;
					ctx.fillStyle="#000000";
					ctx.arc(x,y,20,0,2*Math.PI);
					ctx.fill();
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="显示图片" id="btnshow"/><img src="" id="myimg"/>
		<canvas id="mycanvas" width="500" height="500"></canvas>
		
	</body>
</html>