<!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. python的time时间模块

    模块概述 1.一个.py文件就是一个模块 2.通过import语句在一个模块中导入另一个模块,import sys,print (sys.path),sys.path的结果为一个列表,列表的第一个元素 ...

  2. 05: MySQLdb 原生SQL语句操作数据库

    1.1 MySQLdb安装与简介 1.MySQLdb 模块的安装(python3中目前这个模块还不可用)参考博客 1. linux: yum install MySQL-python 2. windo ...

  3. AP聚类算法

    一.算法简介 Affinity Propagation聚类算法简称AP,是一个在07年发表在Science上的聚类算法.它实际属于message-passing algorithms的一种.算法的基本 ...

  4. Python3基础 函数 收集参数(tuple)+普通参数 的示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. Python跨平台打包

    对于pyinstaller,可以完成在windows,linux,和mac下的python脚本编译,生成exe,elf,.app文件: 1.使用方法: 在pyinstaller的官网上下载,一般是源码 ...

  6. ubuntu16.04下编译ceres-solver

    一.编译环境 ubuntu16.04 二.准备工作之安装必要的库 2.1安装cmake sudo apt-get install cmake 2.2 安装google-glog + gflags su ...

  7. 1、webpack编译打包Sass编译的css进js文件

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...

  8. 如何设置datatable的宽度

    本文为博主原创,未经允许不得转载: datatable插件具有很好的自动适应性,在大多数情况下可以自适应,完美的展示列表内容. 实现其自适应的其特性为:"bAutoWidth": ...

  9. java编程内容之开始

    java应用程序开发应该掌握的各方面技术 1.初识java,熟悉Eclipse开发工具 2.java语言基础 3.流程控制,数组,字符串,类与对象 4.接口,继承与多态,类的高级特性 5.Java集合 ...

  10. Charles Proxy License 破解

    // Charles Proxy License // 适用于Charles任意版本的注册码,谁还会想要使用破解版呢. // Charles 4.2目前是最新版,可用.   Registered Na ...