首页 / HTML5 / 使用HTML5Canvas绘制阴影效果的方法

使用HTML5Canvas绘制阴影效果的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用HTML5Canvas绘制阴影效果的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5217字，纯文字阅读大概需要8分钟。

内容图文

这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影+边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下

创建阴影效果需要操作以下4个属性：

1.context.shadowColor：阴影颜色。
2.context.shadowOffsetX：阴影x轴位移。正值向右，负值向左。
3.context.shadowOffsetY：阴影y轴位移。正值向下，负值向上。
4.context.shadowBlur：阴影模糊滤镜。数据越大，扩散程度越大。
这四个属性只要设置了第一个和剩下三个中的任意一个就有阴影效果。不过通常情况下，四个属性都要设置。

例如，创建一个向右下方位移各5px的红色阴影，模糊2px，可以这样写。

context.shadowColor = "red";   
context.shadowOffsetX = 5;   
context.shadowOffsetY = 5;   
context.shadowBlur= 2;

需要注意的是，这里的阴影同其他属性设置一样，都是基于状态的设置。因此，如果只想为某一个对象应用阴影而不是全局阴影，需要在下次绘制前重置阴影的这四个属性。
运行结果：
使用HTML5Canvas绘制阴影效果的方法 - 文章图片

阴影文字：

只要设置shadowOffsetX与shadowOffsetY的值，当值都正数时，阴影相对文字的右下

方偏移。当值都为负数时，阴影相对文字的左上方偏移。

3D拉影效果：

在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur

的值，从小到大不断偏移不断增加，透明度也不断增加。就得到了拉影效果文字。

边缘模糊效果文字：

在3D拉影效果的基础上在四个方向重复，就得到了边缘羽化的文字效果。

运行效果：
使用HTML5Canvas绘制阴影效果的方法 - 文章图片

程序代码：

<!DOCTYPE html>     
<html>     
<head>     
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">     
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">     
<title>Canvas Clip Demo</title>     
<link href="default.css" rel="stylesheet" />     
    <script>     
        var ctx = null; // global variable 2d context   
        var imageTexture = null;     
        window.onload = function() {     
            var canvas = document.getElementById("text_canvas");     
            console.log(canvas.parentNode.clientWidth);     
            canvas.width = canvas.parentNode.clientWidth;     
            canvas.height = canvas.parentNode.clientHeight;     
            if (!canvas.getContext) {     
                console.log("Canvas not supported. Please install a HTML5 compatible browser.");     
                return;     
            }     
            var context = canvas.getContext('2d');     
            // section one - shadow and blur   
            context.fillStyle="black";     
            context.fillRect(0, 0, canvas.width, canvas.height/4);     
            context.font = '60pt Calibri';     
            context.shadowColor = "white";     
            context.shadowOffsetX = 0;     
            context.shadowOffsetY = 0;     
            context.shadowBlur = 20;     
            context.fillText("Blur Canvas", 40, 80);     
            context.strokeStyle = "RGBA(0, 255, 0, 1)";     
            context.lineWidth = 2;     
            context.strokeText("Blur Canvas", 40, 80);     
            // section two - shadow font   
            var hh = canvas.height/4;     
            context.fillStyle="white";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            context.font = '60pt Calibri';     
            context.shadowColor = "RGBA(127,127,127,1)";     
            context.shadowOffsetX = 3;     
            context.shadowOffsetY = 3;     
            context.shadowBlur = 0;     
            context.fillStyle = "RGBA(0, 0, 0, 0.8)";     
            context.fillText("Blur Canvas", 40, 80+hh);     
            // section three - down shadow effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="black";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            // section four -  fade effect   
            var hh = canvas.height/4 + hh;     
            context.fillStyle="green";     
            context.fillRect(0, hh, canvas.width, canvas.height/4);     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = -i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = 0;     
                context.shadowOffsetY = i*2;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
            for(var i = 0; i < 10; i++)     
            {     
                context.shadowColor = "RGBA(255, 255, 255," + ((10-i)/10) + ")";     
                context.shadowOffsetX = -i*2;     
                context.shadowOffsetY = 0;     
                context.shadowBlur = i*2;     
                context.fillStyle = "RGBA(127, 127, 127, 1)";     
                context.fillText("Blur Canvas", 40, 80+hh);     
            }     
        }     
    </script>     
</head>     
<body>     
    <h1>HTML5 Canvas Clip Demo - By Gloomy Fish</h1>     
    <pre>Fill And Stroke Clip</pre>     
    <p id="my_painter">     
        <canvas id="text_canvas"></canvas>     
    </p>     
</body>     
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的使用HTML5Canvas绘制阴影效果的方法全部内容，希望文章能够帮你解决使用HTML5Canvas绘制阴影效果的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/387056.html

来源：【匿名】

【上一篇】HTML5Plus实现手机APP拍照或相册选择图片上传的功能【下一篇】html5如何获取php数据

更多 ►

【使用HTML5Canvas绘制阴影效果的方法】教程文章相关的互联网学习教程文章

html5 canvas 填充渐变形状【代码】【图】

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>填充渐变形状</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript"> window.addEventListener(‘load‘,eventWindowLoaded,...

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图、饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas ...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf4【图】

CanvasRenderingContext2D对象中用于平移、旋转坐标系的方法镜像scale(1,-1)绘制垂直镜像；scale(-1,1)绘制水平镜像自定义的坐标变换 transform()，多次调用会叠加效果setTransform()，每次调用都会清除上次的效果两个方法都用于旋转、缩放、及平移坐标系（可以根据公式传入0或其他数据）x‘=ax+cy+ey‘=bx+dy+f坐标系旋转公式(angle弧度)x‘=x×cos(angle)-(y×sin(angle))y‘=y×cos(angle)+(x×sin(angle))平移x‘=x+dxy‘=y+dy缩放...

HTML5 Canvas核心技术—图形、动画与游戏开发.pdf7【图】

性能运行putImageData()比drawImage()慢，同等条件下优先考虑drawImage()操作图像数据需要遍历大量数据，应该注意几点：1）避免在循环体中直接访问对象属性，应当保存在局部变量中2）应该用循环计数器遍历完整的像素，而非像素分量（每4个一组）3）逆向遍历与移位技巧效果并不好4）不要频繁使用getImagedata()视频处理var video=document.getElementById(‘video‘);　　//A <video>element　　...context.drawImage(video,0,0);　...

html5 canvas 实现倒计时功能【代码】【图】

function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //填充色day: 0,time: 0,minute: 0,seconds: 0}if (a) {b = $.extend(b, a);}this.total = 0;this.id = b.id;this.x = b.x;this.y = b.y;this.radius = b.radius;this.angle = b.angl...

HTML5 - canvas标签【代码】

canvas标签<!doctype html><htmllang="zh-CN"><head><metacharset="utf-8" /><title>canvas标签</title><head><body><canvasid="canvas"width="500"height="800"style="background:#ccc;">您的浏览器不支持canvas标签，请升级浏览器！</canvas><script>//获取画布对象var canvas=document.getElementById("canvas");//alert(canvas);//获取用于绘画的...

HTML5—canvas绘制图形（1）【代码】【图】

1、canvas基础知识 canvas元素是HTML5中新增的一个重要的元素，专门用来绘制图形，不过canvas本身不具备画图的能力，在页面中放置了canvas元素，就相当于在页面中放置了一块矩形的“画布”，我们可以利用js脚本在“画布”上绘制图形。 1.1canvas元素在利用canvas绘制图形之前，我们首先需要在页面中放置一个canvas元素，如下代码：<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas> 说明：（1）放置canva...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用：图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后，服务器只允许上传1MB大小的图片，此时需要前端将图片先进行压缩，压缩之后再调用图片上传接口将图片上传第一步：创建input元素，监听input表单域的change事件创建一个input元素，并且设置HTML5新增的type为file监听input元素的change事件，并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下：复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。我之所以把控制点的坐标带...

HTML5 Canvas锯齿图代码实例

效果图：提示：把代码复制到一个html文件中并保存，直接打开即可看到效果。实现代码：复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画，它将模拟的是我们现实生活中烟花绽放的动画特效，效果非常逼真，但是毕竟是电脑模拟，带女朋友看就算了，效果还是差了点，呵呵。这个HTML5 Canvas动画有一点比较出色，就是其性能，Chrome上基本没有卡的感觉，就算你放出很多烟花也一样。　　下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，主要由HTML代码、CSS代码以及Javascript代码组成，当然javascript代码是最重要的。　　HTML代...

Canvas HTML5【代码】【图】

Canvas Examples一个canvas是在html页面上规则的区域。默认的，一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...

HTML5-canvas【代码】

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...

html5 之 canvas 相关知识(一)概念及定义【代码】

什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<canvas> 标签只是图形容器，它没有自己的行为，需要定义API 支持脚本化客户端绘图操作。创建 Canvas 元素canvas的代码很简单，定义一个ID以及宽和高。这里强调一点：canvas的宽高必须写在元素上，如果用样式定义，不能改变其图片的比例<canvas i...

使用HTML5 Canvas创建动态粒子网格动画【代码】【图】

最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧：首先当然是添加一个canvas了：<canvasid="canvas"></canvas>下面是样式：<style>#canvas{position: absolute;display: block;left:0;top:0;background:#0f0f0f;z-index: -1;}</style>上面canvas的z-index: -1的作用是可以放在一些元素的下面当...

首页 / HTML5 / 使用HTML5Canvas绘制阴影效果的方法

使用HTML5Canvas绘制阴影效果的方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【使用HTML5Canvas绘制阴影效果的方法】教程文章相关的互联网学习教程文章

HTML5CANVAS - 相关标签

HTML5 - 技术教程分类

HTML5 - 最新教程

HTML5 - 最热教程