HTML之canvas 8 绘制阴影-绘制文字-优快云博客

本文介绍如何使用 Canvas API 在网页上绘制带有阴影效果的圆形及文字。通过设置阴影的颜色、模糊范围及位移量等属性，实现高质量的视觉效果。同时介绍了如何设置文字样式并进行绘制。

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

绘制阴影

Context.shadowOffetX:阴影横向位移量

Context.shadowOffetY:阴影纵向位移量

Context.shadowColor:阴影颜色

Context.shadowBlur阴影的模糊范围

绘制文字

Context.fillStyle=’#00F’;

Context.font=”bold 30px sans-serif”;

Context.fillText(“hello world”,0,0);

Context.strokeText(“hello world”,0,0);

Var metrics=context.measureText(text);

<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制阴影-绘制文字</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		<script type="text/javascript">
			var oCanvas = document.getElementById("canvas");
			var context = oCanvas.getContext("2d");
			context.fillStyle = "#ededed";
			context.fillRect(0, 0, 500, 500);
			//径向渐变
			context.beginPath(); //开始
			var grdCirle = context.createRadialGradient(100, 100, 50, 100, 100, 100);
			//(xStart,yStart,radiusStart)起点圆的中心点坐标和半径，（xEnd,yEnd,radiusEnd）终点圆的中心点坐标和半径
			grdCirle.addColorStop(0, "#f7f8fa"); //起点
			grdCirle.addColorStop(0.5, "red");
			grdCirle.addColorStop(1, "#53c5d9"); //终点
			context.fillStyle = grdCirle;
			context.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆
			context.shadowOffsetX = 2;    //阴影往左边偏，横向位移量
			context.shadowOffsetY = 4;   //阴影往左边偏，纵向位移量
			context.shadowColor = "rgba(0,0,0,0.3)"; //阴影颜色
			context.shadowBlur = 10; //阴影的模糊范围
			context.fill(); //填充
			context.closePath(); //关上
			
			
			//绘制文字
			context.fillStyle= "#000"; //文字颜色
			context.font = "24px Helvetica, Arial, sans-serif;";//字体
			context.fillText("球体",20,30);
			
			
			
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/Abner5/p/5845383.html