HTML5实例——图像及动画

最新推荐文章于 2018-06-06 23:26:44 发布

UtopiaScript

最新推荐文章于 2018-06-06 23:26:44 发布

阅读量555

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/UtopiaScript/article/details/41849685

本文详细介绍了HTML5 Canvas的基本操作，包括使用moveTo和lineTo绘制直线，使用arc方法画弧，以及图形样式设置和渐变图形绘制。通过实例演示了如何在网页中实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas

canvas坐标系原点位于canvas的左上角。

使用moveTo、lineTo画线：

<!doctype html>
<html>
	<head>
		<title>canvas</title>
		<meta charset="UTF-8"/>
		<script>
			function drawLine()
			{
				var canvas=document.getElementById("myCanvas");
				var context=canvas.getContext("2d");
				context.moveTo(10,10);
				context.lineTo(10,100);
				context.lineTo(125,125);
				context.lineTo(150,175);
				context.stroke();
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>使用moveTo、lineTo绘制直线</legend>
			<canvas id="myCanvas" width="200px;" height="200px">
			</canvas>
			<br>
			<button onclick="drawLine()"> 绘图 </button>
		</fieldset>
	</body>
</html>

使用arc方法画弧

<!doctype html>
<html>
	<head>
		<title>canvas</title>
		<meta charset="UTF-8"/>
		<script>
			function drawArc()
			{
				var canvas=document.getElementById("myCanvas");
				var context=canvas.getContext("2d");
				//arc(x,y,radius,startAngle,endAngle,anticlockwise) radius弧形曲线半径，单位为像素。起始结束“弧度”。anticlockwise绘制方向，true逆时针绘制，false顺时针方向绘制。
				context.arc(100,100,80,0,Math.PI/2,false);
				context.stroke();
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>使用arc绘制弧形</legend>
			<canvas id="myCanvas" width="200px;" height="200px">
			</canvas>
			<br>
			<button onclick="drawArc()"> 绘图 </button>
		</fieldset>
	</body>
</html>

图形样式设置

<!doctype html>
<html>
	<head>
		<title>canvas</title>
		<meta charset="UTF-8"/>
		<script>
			function draw()
			{
				var canvas=document.getElementById("myCanvas");
				var context=canvas.getContext("2d");
				//fillStyle设置图形样式默认为纯黑色，该属性可以设置为css颜色，一个图案或一种渐变
				context.fillStyle="yellow";
				//与fillStyle属性用法相同
				context.strokeSytle="red";
				//绘制一个矩形并使用当前的fillStyle样式
				context.fillRect(60,60,130,110);
				//绘制一个矩形，使用当前strokeStyle样式绘制矩形边缘，中间区域不予处理
				context.strokeRect(50,50,150,130);
				//清除指定矩形区域
				context.clearRect(70,70,110,90);
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>绘制带样式的矩形</legend>
			<canvas id="myCanvas" width="200px;" height="200px">
			</canvas>
			<br>
			<button onclick="draw()"> 绘图 </button>
		</fieldset>
	</body>
</html>

画渐变图形

1.线性渐变

<!doctype html>
<html>
	<head>
		<title>canvas</title>
		<meta charset="UTF-8"/>
		<script>
			function draw()
			{
				var canvas=document.getElementById("myCanvas");
				var context=canvas.getContext("2d");
				
				//createLinearGradient(xStart,yStart,xEnd,yEnd);
				//xStart:渐变起始点的横坐标
				//yStart:渐变起始点的纵坐标
				//xEnd:渐变终止点的横坐标
				//yEnd:渐变终止点的纵坐标
				
				//addColorStop(offset,color);
				//offset:颜色从离开渐变起始点开始变化的偏移量
				//color:渐变使用的颜色
				
				//为矩形添加渐变效果
				var mylinear=context.createLinearGradient(0,0,150,50);//创建一个渐变对象
				mylinear.addColorStop(0,"red");//设置第一阶段颜色
				mylinear.addColorStop(0.8,"yellow");//设置第二阶段颜色
				mylinear.addColorStop(1,"green");//设置第三阶段颜色
				context.fillStyle=mylinear;
				context.fillRect(0,0,250,150);//绘制矩形
				
				//为文字添加渐变效果
				var linearText=context.createLinearGradient(300,50,600,50);
				linearText.addColorStop(0,"yellow");
				linearText.addColorStop(0.5,"grey");
				linearText.addColorStop(1,"red");
				context.fillStyle=linearText;
				context.font="30px Arial";
				context.textBaseline="top";//文字对齐方式
				context.fillText("HTML5线性渐变文字",300,50);//参数表示文字x,y轴的位置
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>线性渐变</legend>
			<canvas id="myCanvas" width="600px;" height="200px">
			</canvas>
			<br>
			<button onclick="draw()"> 绘图 </button>
		</fieldset>
	</body>
</html>

2.径向渐变

<!doctype html>
<html>
	<head>
		<title>canvas</title>
		<meta charset="UTF-8"/>
		<script>
			function draw()
			{
				var canvas=document.getElementById("myCanvas");
				var context=canvas.getContext("2d");
				
				//createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
				//xStart:渐变开始圆的圆心横坐标
				//yStart:渐变开始圆的圆心纵坐标
				//radiusStart:渐变开始圆的半径
				//xEnd:渐变结束圆的圆心横坐标
				//yEnd:渐变结束圆的圆心纵坐标
				//radiusEnd:渐变结束圆的半径
				
				//addColorStop(offset,color);
				//offset:颜色从离开渐变起始点开始变化的偏移量
				//color:渐变使用的颜色
				
				//为矩形添加渐变效果
				var fillColorRadial=context.createRadialGradient(150,150,10,150,150,200);//创建一个渐变对象
				fillColorRadial.addColorStop(0,"red");//设置第一阶段颜色
				fillColorRadial.addColorStop(0.2,"yellow");//设置第二阶段颜色
				fillColorRadial.addColorStop(0.4,"green");//设置第三阶段颜色
				context.fillStyle=fillColorRadial;
				//context.fillRect(0,0,300,300);//绘制矩形
				context.rect(0,0,300,300);
				context.fill();
			}
		</script>
	</head>
	<body>
		<fieldset>
			<legend>线性渐变</legend>
			<canvas id="myCanvas" width="300px;" height="300px">
			</canvas>
			<br>
			<button onclick="draw()"> 绘图 </button>
		</fieldset>
	</body>
</html>