Canvas基本语法(1)

最新推荐文章于 2023-07-05 19:11:54 发布

老张家的丑少年

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量162

点赞数

分类专栏： java基础文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_44381874/article/details/107843536

版权

java基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Canvas

1.基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
		 function draw(){
		 	var one = document.getElementById('one');
		 	if(one.getContext){
		 	 var one1 = one.getContext('2d');
		 	 //one1.fillStyle="rgb(200,0,0)";//设置canvas的填充颜色
		 	 //one1.fillRect(10,10,55,50);//设置canvas的起始坐标以及宽高（x轴,y轴,宽,高）
		 	 //one1.fillStyle="rgba(0,0,200,0.5)";
		 	 //one1.fillRect(30,30,55,50);
		 	 //one1.clearRect(30,30,55,50);//清除制定矩形区域，变为透明
		 	 //生成一个矩形中间为白色的框
		 	 one1.fillRect(50,50,100,100);
		 	 one1.clearRect(70,70,60,60);
		 	 one1.strokeRect(75,75,50,50);//生成边框
		 	 //fillRect生成的形状自动填充颜色，strokeRect生成的是边框
		 	}
		 }
		 
		</script>
	</head>
	<body onload="draw()">
		<canvas id="one" width="200px" height="200px" ></canvas>
	</body>
</html>

2.路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function go(){
			   var v = document.getElementById('two');
			   if(v.getContext){
			   	   //生成一个三角形
			   	  var vv = v.getContext('2d');
			   	  /*vv.beginPath();//新建一条路径
			   	  vv.moveTo(25,25);//第一条命令构建，初始位置
			   	  vv.lineTo(100,75);
			   	  vv.lineTo(100,25);
			   	  vv.lineTo(25,25);
			   	  vv.fill();//给图形填充颜色
			   	  vv.closePath();//闭合路径之后图形绘制命令重新指向到上下文中
			   	  vv.stroke();//使用边框构建图形*/
			   	 vv.beginPath();
			   	 vv.arc(75,75,50,0,Math.PI*2,true);//绘制
			   	 vv.moveTo(110,75);
			   	 vv.arc(75,75,35,0,Math.PI,false);//口(顺时针)
			   	 vv.moveTo(65,65);
			   	 vv.arc(60,65,5,0,Math.PI*2,true);//左眼
			   	 vv.moveTo(95,65);
			   	 vv.arc(90,65,5,0,Math.PI*2,true);//右眼(x,y,半径，开始点，结束点(一般是math.pi)，true(逆时针)/false(顺时针))
			   	 vv.stroke();
			   	//vv.arcTo(60,70,70,80,30);//以一个点画一个圆弧，结束后连接另一个点
			   //	vv.stroke();
			   }
			}
			         
		</script>
	</head>
	<body onload="go()">
		<canvas id="two" width="500px" height="500px"></canvas>
	</body>
</html>

3.二次贝塞尔曲线和三次贝塞尔曲线


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function go(){
				var tt = document.getElementById('three');
				if(tt.getContext){
					var t = tt.getContext('2d');
					t.beginPath();
					//二次拉塞尔曲线8
					/*t.moveTo(75,25);
					t.quadraticCurveTo(25,25,25,62.5);
					t.quadraticCurveTo(25,100,50,100)
					t.quadraticCurveTo(50,120,30,125);
					t.quadraticCurveTo(60,120,65,100);
					t.quadraticCurveTo(125,100,125,62.5);
					t.quadraticCurveTo(125,25,75,25);
					t.stroke();*/
					//三次贝塞尔曲线 生成黑心
					t.moveTo(75,40);
					t.bezierCurveTo(75,37,70,25,50,25);
					t.bezierCurveTo(20,25,20,62.5,20,62.5);
					t.bezierCurveTo(20,80,40,102,75,120);
					t.bezierCurveTo(110,102,130,80,130,62.5);
					t.bezierCurveTo(130,62.5,130,25,100,25);
					t.bezierCurveTo(85,25,75,37,75,40);
					t.fill();
				}
			}
			
		</script>
	</head>
	<body onload="go()">
		<canvas id="three" width="400px" height="400px"></canvas>
	</body>
</html>

老张家的丑少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas基本语法(1)

Canvas1.基本语法<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script> function draw(){ var one = document.getElementById('one'); if(one.getContext){ var one1 = one.get
复制链接

扫一扫