图形的变换、组合和切割

最新推荐文章于 2023-09-18 01:10:26 发布

Daisy-lv

最新推荐文章于 2023-09-18 01:10:26 发布

阅读量728

点赞数 1

分类专栏： HTML5

HTML5 专栏收录该内容

5 篇文章

订阅专栏

1.图形的变换

移动坐标空间：使用translate()方法可以将绘图原点横向和纵向的移动到指定距离(x,y)，结果表现为整张图像的移动。
旋转坐标空间：使用rotate()方法，此方法接受一个以弧度为单位的旋转参数，整个canvas将以坐标原点（由translate()所确定的原点）为圆心进行旋转
缩放图形：使用scale()方法进行操作，参数x,y分别代表横向与纵向的缩放比例，两个参数都是浮点数，1.0表示不缩放，小于1.0表示缩小，大于1.0表示扩大。

<html>
<head>
	<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			var rectWidth=150;
			var rectHeight=75;
			context.fillStyle="#ff0000";
			//把坐标原点移动到canvas中心点
			context.translate(canvas.width/2,canvas.height/2);
			context.rotate(0.25*Math.PI);//顺时针旋转45度
			context.scale(1,0.5);//坐标在纵向上缩小一半
			context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

		}
	</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

保存与恢复canvas状态：使用save()和restore()方法可以实现对坐标变换状态的保存于恢复。

<html>
<head>
	<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			//所绘制矩形的宽度和高度
			var rectWidth=150;
			var rectHeight=75;
			context.save();//保存状态1（坐标为0,0）

			context.translate(canvas.width/2,canvas.height/2);
			context.save();//保存状态2（坐标移动到画布的中间）

			context.rotate(0.25*Math.PI);//顺时针旋转45度
			context.save();//保存状态3（按中心点旋转45度）

			context.scale(2,2);//矩形的宽度和高度增加2倍
			context.fillStyle="blue";
			context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

			context.restore();//恢复状态1
			context.fillStyle="red";
            context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

            context.restore();//恢复状态2
			context.fillStyle="yellow";
            context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);

            context.restore();//恢复状态3
			context.fillStyle="green";
            context.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight);
		}
	</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>

2.图形的组合

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）图像上。

source-over：这是默认值，他表示绘制的图形将画在现有画布之上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="source-over"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

destination-over：这个操作的值与前一个值相反，所以现在目标绘制在源之上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="rgb(63,169,245)";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-over"
            context.fillStyle="rgb(255,123,172)";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
    </body>
</html>

source-atop：这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="source-atop"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

destination-atop：这个操作与source-atop相反，目标绘制在源之上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var canvas=document.getElementById("myCanvas");
            var context=canvas.getContext("2d");
            context.fillStyle="rgb(63,169,245)";
            context.fillRect(50,50,100,100);
            context.globalCompositeOperation="destination-atop"
            context.fillStyle="rgb(255,123,172)";
            context.fillRect(100,100,100,100);
        });
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="1000px" height="1000px"></canvas>
    </body>
</html>

source-in：在源于目标重叠的区域只绘制源，而不重叠的部分编程透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="source-in"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

destination-in：这个操作与source-in相反，在源于目标重叠的区域保留目标。而不重叠的部分都变成透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="destination-in"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

source-out：在与目标不重叠的区域上绘制源，其他部分都变成透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="source-out"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

destination-out：在与源不重叠的区域上保留目标。其他部分都变成透明的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="destination-out"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

lighter：这个值与顺序无关，如果源与目标重叠，就将两者的颜色值想家。得到的颜色值的最大取值为255，结果就为白色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="lighter"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

copy：这个值与顺序无关，只绘制源，覆盖掉目标。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="copy"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

xor：这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
		<script type="text/javascript">
		$(document).ready(function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.fillStyle="rgb(63,169,245)";
			context.fillRect(50,50,100,100);
			context.globalCompositeOperation="xor"
			context.fillStyle="rgb(255,123,172)";
			context.fillRect(100,100,100,100);
		});
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1000px" height="1000px"></canvas>
	</body>
</html>

3.图形的裁剪

clip()方法从原始画布中剪切任意的形状和尺寸

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#myCanvas{
			border: 1px solid blue;
			background-color: #77ffcc;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas=document.getElementById("myCanvas");
			var context=canvas.getContext("2d");
			context.rect(50,20,200,120);
			context.stroke();
			context.fillStyle="red";
			context.fillRect(0,0,150,100);

			var canvas=document.getElementById("myCanvas2");
			var context=canvas.getContext("2d");
			context.rect(50,20,200,120);
			context.stroke();
			context.clip();//裁剪
			context.fillStyle="red";
			context.fillRect(0,0,150,100);
		}
	</script>
</head>
<body>
	 <span>图形裁剪之前：</span>
     <canvas id="myCanvas" width="300" height="150" style="..."></canvas><br/>
      <span>图形裁剪之后：</span>
     <canvas id="myCanvas2" width="300" height="150" style="..."></canvas><br/>
</body>
</html>