canvas在画布上创建向上下左右3D影子文字

最新推荐文章于 2023-10-19 15:32:38 发布

努力中的小曾

最新推荐文章于 2023-10-19 15:32:38 发布

阅读量625

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5/CSS3 文章标签： canvas文字3D效果 canvas 3D影子文字 HTML5 CSS3

本文链接：https://blog.csdn.net/bazcsx/article/details/97823736

HTML5/CSS3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas创建具有3D效果的影子文字，通过调整阴影位置和模糊度实现向上、下、左、右不同方向的立体感。代码示例展示了如何动态生成这些效果。

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

canvas在画布上创建向上下左右3D影子文字

简单实现canvas中的文字3D影子;如有代码问题请留言,谢谢;

<!DOCTYPE html>
<html>
	<head>
	    <title>在画布上创建向上的3D拉影文字</title>
	    <style type="text/css" media="screen">
	        .cs3{
	            font-size:40px;
	            text-shadow:6px 12px 4px #000;
	        }
	        button{
				width:410px;
			}
			canvas{
				width:410px;
				height:130px;
			}
	    </style>
	</head>
	<body>
		<p>
		    <button  onclick="myTextshadow('top','myCanvasTop')">在画布上创建向上的3D拉影文字</button>
		</p>
		<canvas id="myCanvasTop" ></canvas>
		<p>
		    <button  onclick="myTextshadow('bottom','myCanvasBottom')">在画布上创建向下的3D拉影文字</button>
		</p>
		<canvas id="myCanvasBottom" ></canvas>
		<p>
		    <button  onclick="myTextshadow('right','myCanvasRight')">在画布上创建向右的3D拉影文字</button>
		</p>
		<canvas id="myCanvasRight" ></canvas>
		<p>
		    <button  onclick="myTextshadow('left','myCanvasLeft')">在画布上创建向左的3D拉影文字</button>
		</p>
		<canvas id="myCanvasLeft" ></canvas>
		<p class="cs3">张三李四王五</p><!--这里使用简单的CSS3做对比效果-->
	
	</body>
</html>

<script src="js/jquery-3.2.1.js"></script>
<script>
	//上下左右的方法
    function myTextshadow(isDirection,id){//传参 参数1:判断上下左右;参数2:id
        let myCanvas = document.getElementById(id);
        let myContext = myCanvas.getContext('2d');//画布设置为2d
        myContext.fillstyle = 'white';
        myContext.font='40pt 宋体';
        let myHeight = 0;
        myContext.fillstyle = 'black';
        myContext.fillRect(0,myHeight,410,130);
        for(let i=0;i<10;i++){
            myContext.shadowColor = 'rgba(255,255,255,'+((10-i)/10)+')';
            if(isDirection== 'left'){
                myContext.shadowOffsetX = -i*2;
                myContext.shadowOffsetY = i*2;
            }else if(isDirection== 'right'){
                myContext.shadowOffsetX = i*2;
                myContext.shadowOffsetY = i*2;
            }else if(isDirection == 'top'){
                myContext.shadowOffsetX = 0;
                myContext.shadowOffsetY = -i*2;
            }else if(isDirection == 'bottom'){
                myContext.shadowOffsetX = 0;
                myContext.shadowOffsetY = i*2;
            }

            myContext.shadowBlur = i*2;
            myContext.fillStyle = 'rgba(127,127,127,1)';
            myContext.fillText('张三李四王五',40,80+myHeight);
        }
    }
</script>