<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>绘制阴影</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="400" style="border:3px dashed #0094ff;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //设置阴影的模糊度
    ctx.shadowBlur = 10;
    //设置阴影的颜色
    ctx.shadowColor = "#f00";
    //设置阴影在X、Y方向的偏移
    ctx.shadowOffsetX =6;
    ctx.shadowOffsetY = -5;
    ctx.strokeStyle = "#ff0";
    ctx.font = "50px 黑体";
    ctx.textBaseline = "top";
    ctx.strokeText("阴影文字小蕾", 100, 10)

ctx.fillStyle = "#ff0";
    ctx.font = "50px 黑体";
    ctx.textBaseline = "top";
    ctx.fillText("阴影文字小蕾", 100, 120)

ctx.fillRect(20, 200, 100, 150);
    ctx.lineWidth = 8;
    ctx.strokeRect(150, 200, 100, 150);

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

html5阴影的更多相关文章

  1. HTML5阴影与渐变

    一.阴影 阴影的效果,阴影有四个状态值控制,分别是shadowBlur,shadowOffsetX,shadowOffsetY和shadowColor.shadowBlur为阴影的像素模糊值,shad ...

  2. HTML5 Canvas阴影用法演示

    HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...

  3. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  4. 酷炫，用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  5. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  6. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  7. HTML5画布（阴影）

    案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...

  8. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  9. html5 canvas创建阴影

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JavaScript甜点（1）

    甜点1:什么是脚本语言? 脚本语言是由传统编程语言简化而来的,它与传统的编程语言既有很多相似之处,又有很多的不同之处.脚本语言的最显著的特点是:首先它不需要编译成二进制,以文本的形式存在:其次就是脚本 ...

  2. java使用itex读取pdf，并搜索关键字，为其盖章

    导读:近期要做一个根据关键字定位pdf的盖章位置的相关需求,其中关键字可配置多个(包含pdf文档中可能不存在的关键字),当页面显示盖章完成时,打开pdf显示已经损坏. 排查后发现,当itext搜索的关 ...

  3. linux 之awk命令详解

    awk是一种程序语言,对文档资料的处理具有很强的功能.awk名称是由它三个最初设计者的姓氏的第一个字母而命名的: Alfred V. Aho.Peter J. We i n b e rg e r.Br ...

  4. 用Python为iOS和Android写跨平台的应用

    首先保证安装了最新的python(当前安装的是python3.6) 一.安装Kivy :python -m pip install --upgrade pip wheel setuptools pyt ...

  5. 如何修改bootstrap模态框的backdrop蒙版区域的颜色?

    参考地址: http://www.cnblogs.com/9miao/p/4988196.html 蒙板样式实现: 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果:在Boots ...

  6. github issues的操作

    https://help.github.com/en/articles/searching-issues-and-pull-requests 根据 reporter筛选issues https://h ...

  7. java 插件安装

    Emmet插件 : https://www.cnblogs.com/lxjshuju/p/7136420.html 使用方法: 在JSP中使用快捷键 ctrl+e 同其他文件的TAB键

  8. c#进阶之Delegate

    委托是什么?答:委托是一种类型   等同与 一个class类,继承System.MulticastDelegate,但mult....gate是一个特殊类,不能够派生 委托的调用,如何去使用 1/委托 ...

  9. 项目梳理5——修改已生成.nuspec文件

    xxxx.nuspec格式如下 <?xml version="1.0"?> <package > <metadata> <id>$i ...

  10. js分号的重要性

    js中语句末尾可以不加分号, 很多时候在做练习或写几个页面时,我都是不会加的.虽然知道加了会好一点.但就是觉得很敲一句就要多按一次分号键(;)来加分号,而不加也不怎么样,然后就不想加了. 也听说在对j ...