HTML5利用Canvas绘制图形(绘制渐变、模式、变换)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zuosixiaonengshou/article/details/72855693

绘制渐变

渐变是一种很普遍的视觉形象,能带来视觉上的舒适感。在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变。渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样式中。使用渐变需要三个步骤:首先是创建渐变对象;其次是设置渐变颜色和过渡方式;最后将渐变对象赋值给填充样式或描边样式。

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制渐变</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//创建渐变对象:线性渐变
				var grd=context.createLinearGradient(0,0,300,0);
				//设置渐变颜色及方式
				grd.addColorStop(0,"#f90");
				grd.addColorStop(1,"#0f0");
				//将填充样式设置为线性渐变对象
				context.fillStyle=grd;
				context.fillRect(0,0,300,80);
			}
			window.addEventListener("load",Draw,false);
			function Draw2(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//创建渐变对象:径向渐变
				var grd=context.createLinearGradient(0,0,300,0);
				//设置渐变颜色及方式
				grd.addColorStop(0,"#0f0");
				grd.addColorStop(1,"#f90");
				//将填充样式设置为线性渐变对象
				context.fillStyle=grd;
				context.beginPath();
				context.arc(180,180,90,0,Math.PI*2,true);
				context.fill();
			}
			window.addEventListener("load",Draw2,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
		<canvas id="canvas2" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>


效果 上(线性渐变),下(径向渐变)


模式

    模式是一个抽象的概念,描述的是一种规律。在Canvas中,通常会为贴图图像创建一个模式,用于描边样式和填充样式,可以绘制出带图案的边框和背景图。

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模式</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var img=new Image();
				img.src="../img/5.jpg";
				img.onload=function(){
					//创建一个贴图模式,循环平铺图像
					var ptrn=context.createPattern(img,'repeat'); 
					context.fillStyle=ptrn;
					context.fillRect(0,0,1000,2000);
				}
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

效果


变换

   在绘制图像的过程中,如果一种形状的图形要绘制多次,显然是增加了复杂性。Canvas绘图API提供了多种变换方法,为实现复杂的绘图操作提供了便捷的方法。常见的变换方法包括平移、缩放、旋转和变形。

1. 移动变换

    将整个坐标系统设置一定的偏移数量,绘制出来的图像也会跟着偏移。(默认以左上角(0,0)作为原点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制渐变</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}
			function ArcFace(context){
				//绘制一个圆形边框
				context.beginPath();
				context.arc(0,0,90,0,Math.PI*2,true);
				context.lineWidth=5;
				context.strokeStyle="#f90";
				context.stroke();
				//绘制一个脸谱
				context.beginPath();
				context.moveTo(-30,-30);
				context.lineTo(-30,-20);
				context.moveTo(30,-30);
				context.lineTo(30,-20);
				context.moveTo(-20,30);
				context.bezierCurveTo(-20,44,20,30,30,20);
				context.strokeStyle="#000";
				context.lineWidth=10;
				context.lineCap="round";
				context.stroke();
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

效果  


2.缩放变换

   缩放变换是将整个坐标系统设置一对缩放因子,绘制出来的图像会相应的缩放。

代码实现

function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//缩放图像,在水平方向和垂直方向设置不同的缩放因子
				context.scale(0.6,0.4)
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}

效果


3.旋转变换

  是将整个坐标系统设置一个选装的角度,绘制出来的图像会相应的旋转。

function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//旋转图像,顺时针旋转30度
				context.rotate(Math.PI/6);
				//缩放图像,在水平方向和垂直方向设置不同的缩放因子
				context.scale(0.6,0.4)
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}

效果


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页