canvas基础学习（三）-曲线的绘制

最新推荐文章于 2024-03-31 17:17:38 发布

何烨坪Echo

最新推荐文章于 2024-03-31 17:17:38 发布

阅读量653

点赞数

分类专栏： canvas学习

本文链接：https://blog.csdn.net/heye13/article/details/51546559

版权

canvas学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你当前的浏览器不支持canvas，请更换浏览器再试。
		</canvas>
		
		<script>
			window.onload = function(){
				
				var canvas = document.getElementById("canvas");
				
				canvas.height = 600;
				canvas.width = 800;
				
				var context = canvas.getContext("2d");
				
				//arcTo
				context.beginPath();
				context.moveTo(150, 150);
				context.arcTo(650, 150, 650, 650, 300);
				
				context.lineWidth = 6;
				context.strokeStyle ="#FF0000";
				context.stroke();
				
				//baseLine
				context.beginPath();
				context.moveTo(150, 150);
				context.lineTo(650, 150);
				context.lineTo(650, 650);
				
				context.lineWidth = 2;
				context.strokeStyle = "gray";
				context.stroke();
				
			}
		</script>
		
	</body>
</html>

运行结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你当前的浏览器不支持canvas，请更换浏览器再试。
		</canvas>
		
		<script>
			window.onload = function(){
				
				var canvas = document.getElementById("canvas");
				
				canvas.height = 600;
				canvas.width = 800;
				
				var context = canvas.getContext("2d");
				
				drawRoundRect(context, 100,100,600,400,50);
				
			}
			
			function drawRoundRect(cxt, x, y, width, height, radius){
				
				cxt.save();
				cxt.translate(x, y);
				pathRoundRect(cxt, width, height, radius);
				cxt.strokeStyle = "black";
				cxt.stroke();
				cxt.restore();
				
			}
			
			function pathRoundRect(cxt, width, height, radius){
				
				cxt.beginPath();
				cxt.arc(width-radius, height-radius, radius, 0, Math.PI/2);
				cxt.lineTo(radius, height);
				cxt.arc(radius, height-radius, radius, Math.PI/2, Math.PI);
				cxt.lineTo(0, radius);
				cxt.arc(radius, radius, radius, Math.PI, Math.PI*3/2);
				cxt.lineTo(width-radius, 0);
				cxt.arc(width-radius,radius,radius,Math.PI*3/2, Math.PI*2);
				cxt.closePath();
				
			}
		</script>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你当前的浏览器不支持canvas，请更换浏览器再试。
		</canvas>
		
		<script>
			window.onload = function(){
				
				var canvas = document.getElementById("canvas");
				
				canvas.height = 800;
				canvas.width = 800;
				
				var context = canvas.getContext("2d");
				
				fillMoon(context, 2, 300, 300, 300, 30);
			}
			
			function fillMoon(cxt, d, x, y, R, rot, /*option*/fillColor){
				cxt.save();
				cxt.translate(x, y);
				cxt.rotate(rot*Math.PI/180);
				cxt.scale(R, R);
				pathMoon(cxt, d);
				cxt.fillStyle = fillColor || "#fb5";
				cxt.fill();
				cxt.restore();
			}
			
			function pathMoon(cxt, d){
				cxt.beginPath();
				cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);//绘制圆弧的外弧
				cxt.moveTo(0, -1);
				cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
				cxt.closePath();
			}
			
			function dis(x1, y1, x2, y2){
				return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
			}
			
		</script>
		
	</body>
</html>

为了更好的了解赛贝尔曲线，可以前去这个网站自己玩玩：http://cubic-bezier.com/#.17,.67,.73,.33

运用赛贝尔曲线完善之前画的星空，添加了下面的草地，具体实现如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">
			你当前的浏览器不支持canvas，请更换浏览器再试。
		</canvas>
		
		<script>
			window.onload = function(){
				var canvas = document.getElementById("canvas");
				
				canvas.width = 1000;
				canvas.height = 600;
				
				var context = canvas.getContext("2d");
				
				//var skyStyle = context.createLinearGradient(0, 0, 0, canvas.height);//线性渐变
				var skyStyle = context.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);//径向渐变
				skyStyle.addColorStop(0.0, '#035');
				skyStyle.addColorStop(1.0, 'black');
				context.fillStyle = skyStyle;
				context.fillRect(0,0,canvas.width,canvas.height);
				
				for(var i = 0; i < 200; i ++){
					var r = Math.random()*5+5;
					var x = Math.random()*canvas.width;
					var y = Math.random()*canvas.height*0.65;
					var a = Math.random()*360;
					var dis = Math.min(x,canvas.width-x,y,canvas.height-y);
					if(dis >= r){
						drawStar(context, r, x, y, a);
					}
					
				}
				
				fillMoon(context, 2, 600, 100, 50, 40);
				drawLand(context);
				
			}
			
			function drawLand(cxt){
				cxt.save();
				
				cxt.beginPath();
				cxt.moveTo(0, 400);
				cxt.bezierCurveTo(540, 400, 660, 600, 1000, 500);
				cxt.lineTo(1200, 800);
				cxt.lineTo(0, 800);
				cxt.closePath();
				
				var landStyle = cxt.createLinearGradient(0, 800, 0, 0);
				landStyle.addColorStop(0.0, '#030');
				landStyle.addColorStop(1.0, '#580');
				cxt.fillStyle = landStyle;
				
				cxt.fill();
				
				cxt.restore();
			}
			
			function drawStar(cxt, R, x, y, rot){
				
				cxt.save();
				
				cxt.translate(x,y);
				cxt.rotate(rot/180*Math.PI);
				cxt.scale(R,R);
				
				starPath(cxt);
				
				cxt.fillStyle = "#fd5";
//				cxt.strokeStyle = "#fd5";
//				cxt.lineWidth = 3;
//				cxt.lineJoin = "round";
				
				cxt.fill();
				//cxt.stroke();
				
				cxt.restore();
				
				}
			function starPath(cxt){
				cxt.beginPath();
				for(var i = 0; i < 5; i ++){
					cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
						   		-Math.sin((18+i*72)/180*Math.PI));
					cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
						   		-Math.sin((54+i*72)/180*Math.PI)*0.5)
				}
				cxt.closePath();
			}
			
			function fillMoon(cxt, d, x, y, R, rot, /*option*/fillColor){
				cxt.save();
				cxt.translate(x, y);
				cxt.rotate(rot*Math.PI/180);
				cxt.scale(R, R);
				pathMoon(cxt, d);
				cxt.fillStyle = fillColor || "#fb5";
				cxt.fill();
				cxt.restore();
			}
			
			function pathMoon(cxt, d){
				cxt.beginPath();
				cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);//绘制圆弧的外弧
				cxt.moveTo(0, -1);
				cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);
				cxt.closePath();
			}
			
			function dis(x1, y1, x2, y2){
				return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
			}
			
				
		</script>
		
	</body>
</html>