HTML画布

最新推荐文章于 2022-09-04 16:17:06 发布

bear_cab

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量655

点赞数

本文链接：https://blog.csdn.net/phone13144830339/article/details/78687877

版权

Canvas1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<canvas id="canvas" width="1000" height="800" />
	
	<script type="text/javascript">
		//纸
		var canvas=document.getElementById("canvas");
		//笔
		var context = canvas.getContext("2d");
		//墨
		context.strokeStyle="#ff0000";
		//写
		context.strokeRect(100,100,200,200);
		context.fillStyle="#ffff00";
		context.fillRect(200,200,200,200);
		//三角型
		context.beginPath();
		context.moveTo(300,300);
		context.lineTo(300,400);
		context.lineTo(500,400);
		context.closePath();
		context.strokeStyle="#000000";
		context.lineWidth=3;
		context.stroke();
		context.fillStyle="#ff0000";
		context.fill();
	</script>
</body>
</html>

Canvas2.html

<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="800" />
		<script type="text/javascript">
			var canvas=document.getElementById("canvas");
			var context = canvas.getContext("2d");
			context.strokeStyle="rgba(255,0,0,0.5)";
			
			context.beginPath();
			//			圆心     半径    
			context.arc(300,300,100,0,Math.PI*2,false);
			context.closePath();
			context.stroke();
			context.fillStyle="#ff0000";
			context.fill();
		</script>
	</body>
</html>

Canvas3.html

<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="800" ></canvas>
		<script>
			function createCanopyPath(context) {
				context.beginPath();
				
				context.moveTo(-25,-50);
				context.lineTo(-10,-80);
				context.lineTo(-20,-80);
				context.lineTo(-5,-110);
				context.lineTo(-15,-110);
				context.lineTo(0,-140);
				
				context.lineTo(15,-110);
				context.lineTo(5,-110);
				context.lineTo(20,-80);
				context.lineTo(10,-80);
				context.lineTo(25,-50);
				
				context.closePath();
				
			}
			
			function drawTree(context) {
				//树叶
				createCanopyPath(context);
				context.strokeStyle="#663300";
				context.lineWidth=4;
				
				//圆角处理
				context.lineJoin="round";
				context.stroke();
				
				
				context.fillStyle="#339900";
				context.fill();
				//树干
					//颜色 线性渐变
				var trunkGradient = context.createLinearGradient(-5,0,5,0);
					trunkGradient.addColorStop(0,"#663300");
					trunkGradient.addColorStop(0.4,"#996600");
					trunkGradient.addColorStop(1,"#552200");
					context.fillStyle=trunkGradient;
					context.fillRect(-5,-50,10,50);
					
				
				//倒影
				context.transform(1,0,-0.5,1,0,0);
				
				context.scale(1.0,0.6);
				context.fillStyle="rgba(0,0,0,0.2)";
				
				context.fillRect(-5,-50,10,50);
				
				createCanopyPath(context);
				context.fill();
			}
		
			function drawTrails(){
				var canvas=document.getElementById("canvas");
				
				var context = canvas.getContext("2d");
				//小树
				context.save();
				context.translate(130,250);
				drawTree(context);
				context.restore();
				//大树
				context.save();
				context.translate(330,450);
				context.scale(2.0,2.0);
				drawTree(context);
				context.restore();
				
				//文字
				context.save();
				context.font="60px impact";
				context.textAlign="center";
				context.fillStyle = "#996600";
				context.fillText("GOODS",200,60,400);
				context.restore();
			}	
			
			drawTrails();
		</script>
	</body>
</html>

bear_cab

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML画布

Canvas1.htmlInsert title here //纸 var canvas=document.getElementById("canvas"); //笔 var context = canvas.getContext("2d"); //墨 context.strokeStyle="#ff0000"; //写 context.
复制链接

扫一扫