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:idlet myCanvas = document.getElementById(id);let myContext = myCanvas.getContext('2d');//画布设置为2dmyContext.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>

效果如下

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

ztext - 简单几行代码创建酷炫 3D 特效文字的开源 JS 库
把网页上的文字变成酷炫的 3D 风格,还能制作旋转动效,有了 ztext.js,只需要几行代码. ztext 能做什么 ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库,让开 ...
【canvas 图形画布标签】(使用详解)
canvas 图形画布标签 1. 如何定义一个图形画布 ? 1.1 canvas 图形画布标签的属性有哪些 ? 1.2 canvas 图形画布的基本用法有哪些 ? 1.3 如何使用 canv ...
使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1)
使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1) 刚来这找到一篇好文,自己翻译了下:(原文:http://dev.opera.com/articles/view/cr ...
使用HTML5 canvas和光线投影算法创建伪3D 游戏
为什么80%的码农都做不了架构师?>>> 作者 Jacob Seidelin · 2008年11月28日本文翻译自 Creating pseudo 3D games with ...
python创建画布与子图_python实现在一个画布上画多个子图
今天小编就为大家分享一篇python实现在一个画布上画多个子图,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. ...
【Grasshopper基础13】创建可在画布上自由传递的自定义类型数据（上）—— IGH_Goo接口的重要性及其实现
接下来的两章,我们来介绍一下在之前章节尚未介绍到的,但却在Grasshopper中占据极其重要地位的另一批我们早就虎视眈眈但却还没想到理由要去触碰的电池们(左侧红色框指示): 是的,就是这一些带黑底的 ...
如何在canvas画布上自定义鼠标右键菜单内容？
用户大大提了一个需求,想要在画布上能够右键快捷点击使用某个功能,小菜鸟肯定要满足啊(委屈脸),然后靠着强大的各路神仙,写下了如下代码,终于实现了,为自己放个烟花~~~不喜勿喷哦~ 1.自定义鼠标右键菜 ...
【Grasshopper基础14】创建可在画布上自由传递的自定义类型数据（下）—— 电池与自定义IGH_Goo的交互
2022年3月至今,这段日子真是一段令人印象深刻的时光. 总之,居家这么久了,忙了一阵终于可以来写点东西了.首先要对上一期[基础13]内的两个小错误进行一个勘误: 在 class Pudge 中对 I ...
HTML5两个画布如何弄,有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

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

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

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

最新文章

热门文章