JavaScript Canvas之画图

最新推荐文章于 2023-09-14 19:27:33 发布

哄哄9709

最新推荐文章于 2023-09-14 19:27:33 发布

阅读量597

点赞数

分类专栏：代码笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_55626132/article/details/128270748

版权

代码笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

创建画布，绘制线、矩形、圆、圆弧等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas练习</title>
	</head>
	<body>
		<!-- 创建画布 -->
		<canvas id="canvas01" width="300" height="300" style="border:4px solid #000000;"></canvas>
		<canvas id="canvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
		
		<script>
			//一、创建画布元素canvas01
			// var canvas01=document.getElementById("canvas01");
			var ctx01=document.getElementById("canvas01").getContext("2d");
			
			ctx01.fillStyle="red";
			ctx01.fillRect(5,5,20,20);
			
			//绘制填充的多边形
			ctx01.fillStyle="aqua";
			ctx01.beginPath();
			ctx01.moveTo(50,5);
			ctx01.lineTo(30,20);
			ctx01.lineTo(30,40);
			ctx01.lineTo(70,40);
			ctx01.lineTo(70,20);
			ctx01.fill();
			
			//绘制圆弧和圆
			ctx01.lineWidth=3;
			ctx01.strokeStyle="blue";
			ctx01.beginPath();
			ctx01.arc(10,80,40,0,0.5*Math.PI,false);
			ctx01.stroke();
			
			ctx01.lineWidth=8;
			ctx01.strokeStyle="green";
			ctx01.beginPath();
			ctx01.arc(100,80,40,0,Math.PI,false);
			ctx01.stroke();
			
			ctx01.lineWidth=12;
			ctx01.strokeStyle="plum";
			ctx01.beginPath();
			ctx01.arc(210,80,50,0,2*Math.PI,false);
			ctx01.stroke();
			
			//绘制连环圆
			var Circle=function(width,style,x,y,radius,fill){
				ctx01.lineWidth=width;
				ctx01.beginPath();
				ctx01.arc(x,y,radius,0,2*Math.PI,false);
				if(fill==true){
					ctx01.fillStyle=style;
					ctx01.fill();
				}else{
					ctx01.strokeStyle=style;
					ctx01.stroke();
				}
			}
			Circle(4,"Red",70,190,10,true);
			Circle(3,"Orange",70,190,20,false);
			Circle(2,"aqua",70,190,30,false);
			Circle(3,"Green",70,190,40,false);
			Circle(4,"Blue",70,190,50,false);
			Circle(1,"Purple",70,190,60,false);
			
			
			//二、创建画布元素canvas
			var canvas=document.getElementById("canvas");
			var ctx=canvas.getContext("2d");
			
			// 绘制填充的矩形
			ctx.fillStyle="red";
			// ctx.fillRect(0,0,10,10);
			for(var i=0;i<8;i++){
				ctx.fillRect(i*10,i*10,10,10);
			}
			
			//绘制空心矩形
			ctx.strokeStyle="mediumslateblue";
			ctx.lineWidth=4;
			ctx.strokeRect(100,25,100,20);
			
			//绘制线性渐变的矩形
			var gradient=ctx.createLinearGradient(100,50,200,0);
			gradient.addColorStop(0,"red");
			gradient.addColorStop(1,"blue");
			ctx.fillStyle=gradient;
			ctx.fillRect(100,50,100,20);
			
			//绘制放射状渐变的矩形
			var grd=ctx.createRadialGradient(150,130,5,160,145,100);
			grd.addColorStop(0,"green");
			grd.addColorStop(1,"white");
			ctx.fillStyle=grd;
			ctx.fillRect(100,80,100,100);
			
			//绘制线条或路径
			ctx.strokeStyle="orchid";
			ctx.lineWidth=8;
			ctx.beginPath();
			ctx.moveTo(220,110);
			ctx.lineTo(290,170);
			ctx.moveTo(290,110);
			ctx.lineTo(220,170);
			ctx.stroke();
			
			</script>
	</body>
</html>

效果图如下所示：