JavaScript canvas实现带有阴影的图形和文字

用canvas创建带有阴影的图形和文字，供大家参考，具体内容如下

ctx.shadowBlur=20;设置阴影模糊范围。
ctx.shadowColor;设置阴影模糊颜色。

还可以利用

shadowOffsetX属性设置阴影与图形的水平距离。
shadowOffsetY属性设置阴影与图形的垂直距离。

代码：

<!DOCTYPE html>
<html>
<head>
 <title>创建带有阴影的图形和文字</title>
</head>
<body>
<h3 align="center">放射状渐变色</h3>
<hr>
<canvas id="myc1" width="800" height="600"></canvas>
<script type="text/javascript">
 var myc = document.getElementById("myc1");//绘制一个新画布
 var ctx = myc.getContext("2d"); //设置绘图环境为2d
 var myg = ctx.createRadialGradient(130,200,0,130,200,90);
 //addColorStop方法 第一个参数为图像内的百分比 第二个参数为颜色
 myg.addColorStop(0,"white");
 myg.addColorStop(0.5,"pink");
 myg.addColorStop(0.6,"green");
 myg.addColorStop(0.4,"blue");
 ctx.fillStyle=myg;
 ctx.shadowColor="black"; //阴影颜色
 ctx.shadowBlur=20; //阴影模糊范围
 ctx.arc(130,200,100,0,Math.PI*2); //绘制一个新圆
 ctx.fill();

 ctx.beginPath();
 var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
 myg1.addColorStop(0,"blue");
 myg1.addColorStop(0.6,"green");
 myg1.addColorStop(1,"red");
 ctx.fillStyle=myg1;
 ctx.font="50px 黑体"; //设置字体大小和字体样式
 ctx.shadowBlur=50; //设置阴影模糊范围
 ctx.shadowColor="yellow";//阴影颜色；
 ctx.shadowOffsetX=30; //水平方向网上偏移；
 ctx.shadowOffsetY=-30;//垂直方向往下偏移；
 ctx.fillText("放射性渐变文字",350,200);

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用Three.js如何实现阴影效果实例代码

    利用Three.js如何实现阴影效果实例代码

    前言 众所周知作为webgl的插件,three.js肯定没有原生webgl那样,添加一个阴影这么费劲.所以,经过一小时的研究(笨人不聪明,已经是极限速度了).终于将阴影效果做了出来,并且还发现一些容易犯错的地方.话不多说了,来一起看看详细的介绍吧. 先上效果图: 实现这个效果其实很简单,只需要设置几个属性就可以实现当前的效果.而上面的材质问题我将放到下一节: (1)首先需要告诉渲染器我需要阴影,你给我生成阴影: renderer.shadowMap.enabled = true; (2)然后告诉

  • Div+Js实现的带阴影菜单 微软以前网站曾用过

    Div+Js实现的带阴影菜单 微软以前网站曾用过 var global = window.document global.fo_shadows = new Array function makeRectangularDropShadow(el, color, size) { var i; for (i=size; i>0; i--) { var rect = document.createElement('div'); var rs = rect.style rs.position = 'abs

  • js 实现无干扰阴影效果 简单好用（附文件下载）

    插件(当然不知道算不算插件)使用说明: 1.加载文件 复制代码 代码如下: <script type="text/javascript" src="Shadows.js"></script> 编写html: 复制代码 代码如下: <div style="font: bold 32pt sans-serif;"> <span shadow = '3px 3px blue 5px 5px red 7px 7p

  • js当前页面登录注册框,固定div,底层阴影的实例代码

    这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • WebGL three.js学习笔记之阴影与实现物体的动画效果

    实现物体的旋转.跳动以及场景阴影的开启与优化 本程序将创建一个场景,并实现物体的动画效果 运行的结果如图: 运行结果 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Three.js</title> <script src="../../../Import/three.js

  • 用JS实现网页元素阴影效果的研究总结

    前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章,现在还有一点印象,其思路很简单,主要是利用几个层的定位偏移来实现的阴影特效,于是偶就想能不能封装成一个js函数,方便在每个html对象上调用． 开始偶以为很简单,但实现过程中确遇到了很多问题,其中最严重的就是浏览器的兼容问题,整整耗了偶整个晚上加半个通宵的时间才搞定,汗呢!不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识． 总结于此,以备以后查看方便

  • JSP实现弹出登陆框以及阴影效果

    JSP实现弹出登陆框以及阴影效果

    本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码,供大家参考,具体内容如下 先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果. 代码如下: CSS样式: <style> .win { POSITION:absolute; left:55%; top:60%; width:400px; hei

  • JavaScript canvas实现带有阴影的图形和文字

    JavaScript canvas实现带有阴影的图形和文字

    用canvas创建带有阴影的图形和文字,供大家参考,具体内容如下 ctx.shadowBlur=20;设置阴影模糊范围. ctx.shadowColor;设置阴影模糊颜色. 还可以利用 shadowOffsetX属性设置阴影与图形的水平距离. shadowOffsetY属性设置阴影与图形的垂直距离. 代码: <!DOCTYPE html> <html> <head> <title>创建带有阴影的图形和文字</title> </head>

  • JavaScript+Canvas实现带跳动效果的粒子动画

    目录 前言 实现过程 运行效果 总结 前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画.会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代码,实现画布上一系列粒子的随机运动和相互作用.还会使用 CSS3 动画属性,使得画布背景颜色和粒子颜色能够流畅地过渡,达到更加自然的效果. 代码运行效果在底部 实现过程 1.创建 Canvas 元素,并获取其上下文 在实现粒子跳动动画的过程中,第一步需要创建一个 Canvas 元素,并获取其上下文.Canv

  • JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(

  • javascript canvas实现简易时钟例子

    本文实例为大家分享了javascript canvas实现简易时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • JavaScript canvas实现七彩时钟效果

    JavaScript canvas实现七彩时钟效果

    利用canvas写七彩时钟! 1.题目 (1).拿到一个时钟案例要求在页面上画出一个时钟,获取当前电脑的系统时间?(样式不限利用h5实现) 2.思路 (1).首先我们要充分了解到canvas画布元素里面的图形以及线段的画法,圆的画法,时针.分针.秒针的画法: (2).其次,是要在页面布局渲染出一个时钟的图形,画出刻度的位置,以及时针分针秒针的位置的静态效果,方便后面定时器来实现动态效果: (3).做好这些工作后,最难的地方是如何将时针分针和秒针与刻度一一对应,那么我们就要用到圆的弧度制,让定时器

  • jquery canvas生成带有二维码的海报

    本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下 需求:点击图片弹窗生成带有二维码的海报. 遇到相关问题: 1.生成的图片会模糊.不清晰. 2. 苹果手机和安卓手机 文字位置和字体大小有差异. 引入所需要的文件 //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&qu

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • JavaScript canvas复刻苹果发布会环形进度条

    JavaScript canvas复刻苹果发布会环形进度条

    目录 前言 基础 Dom 结构 基本变量 画圆 画弧线 让画面动起来 总结 前言 canvas 真是一个好东西,它给前端插上了想象的翅膀,伴随着 h5 而来,将 web 代入了新的领域,基于canvas 技术实现的各种酷炫效果和2d.3d 游戏,也让浏览器能承载更加强大的功能.尤其是它性能还很好,搞游戏再合适不过了,我就喜欢用 canvas 写一些小游戏玩. 在线地址 最近无意中看到前段时间写的这个小效果,觉得挺有意思的,就分享出来:这是苹果ios 12 发布会上库克 ppt 里展示的内容,一个

  • JavaScript canvas 实现用代码画画

    目录 引言 第一部分:图形绘制 画画第一步:准备好画布和画笔 画画第二步:给画笔调个粗细 画画第三步:给画笔沾点颜料 画画第四步:描点画图 (1)画一个三角形 (2)画一个矩形 (3)画一个圆 (4)进阶:画一个笑脸 画画第五步:署名 第二部分:图片绘制 引言 canvas是HTML的一个绘图标签,与SVG用标签绘图不同,canvas是通过Js代码进行图形绘制,多用于移动端分享海报绘制以及照片裁剪等场景.本文将结合部分canvas API介绍在Vue项目中如何使用canvas进行简单的图形绘制和

  • JavaScript+canvas实现七色板效果实例

    JavaScript+canvas实现七色板效果实例

    本文实例讲述了JavaScript+canvas实现七色板效果.分享给大家供大家参考,具体如下: 效果图如下: html: <canvas id="canvas" class="canvas" width="600" height="600"></canvas> css: html,body{margin: 0;padding: 0} .canvas{display: block; margin-lef

随机推荐