<!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. C++设计模式 之 “对象性能” 模式：Singleton、Flyweight

    “对象性能”模式 面向对象很好地解决了“抽象”的问题,但是必不可免地要付出一定的代价.对于通常情况来讲,面向对象的成本大都可以忽略不计.但是某些情况,面向对象所带来的成本必须谨慎处理. 典型模式 # ...

  2. 02: MySQL的安装与基本配置

    MySQL其他篇 目录: 参考网站 1.1 MySQL安装与基本配置(centos 7.3) 1.2 修改MySQL默认字符集和引擎 1.3 MySQL创建用户与授权 1.1 MySQL安装与基本配置 ...

  3. 20145305 《网络对抗》MSF基础应用

    实践过程及结果截图 主动攻击ms08_067 Kali的IP:10.43.46.93 靶机的IP:10.43.49.28 MS08_067远程漏洞攻击实践:Shell 攻击成功的结果 在kali上执行 ...

  4. 20165310_JavaExp1

    20165310_JavaExp1_Java开发环境的熟悉 一.Exp1 Exp1_1 实验目的与要求: 使用JDK编译.运行简单的Java程序: 使用Vim进行Java源代码编译: 利用Git上传代 ...

  5. vs下C++内存泄露检测

    本文原链接: http://www.cnblogs.com/zouzf/p/4152279.html 参考文章: http://msdn.microsoft.com/zh-cn/library/x98 ...

  6. mac下的一些操作

    mac 下修改Hosts文件 : http://www.cnblogs.com/zhangqs008/p/3773623.html mac下装Tomcat服务器: 在苹果系统安装Tomcat:首先下载 ...

  7. MAKEFILE 编程基础之一【转】

    本文转载自:http://www.himigame.com/gcc-makefile/766.html 概述: 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Wind ...

  8. bootstrap6 关于bs的使用总结

    在同一行中也可以有多个过了行的 "行", 即列的"总宽度"超宽度12. 即实现堆叠display:block和水平排列float的自动控制, 在div的clas ...

  9. jQuery:ajax处理html页面

    源码: $.ajax({ url: url, success: function (data) { var reg = /<body>[\s\S]*<\/body>/g; ]; ...

  10. 【第三十一章】 elk（2）- 第二种架构（最常用架构）

    参考:http://linuxg.blog.51cto.com/4410110/1761757 最常用架构: 一.安装redis 1.下载:http://redis.io/download 2.解压后 ...