<!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++继承、多态以及与java的行为差异之处

    对于面向对象而言,多态是最有用的基本特性之一,相对于函数指针,易用得多.下面看下c++继承和多态行为的基本特性,最后说明下和java的基本差别. 首先定义父类和子类. base.h #pragma o ...

  2. 20145122《 Java网络编程》实验五实验报告

    实验名称 Java网络编程 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 结对小伙伴 20145120黄玄曦 博客地址:http://www.cnblo ...

  3. Ubuntu18.04安装Openssl-1.1.1

    1.查看版本 Ubuntu的版本是18.04.使用openssl version命令查看openssl版本,可以看到Ubuntu自带了openssl-1.1.0版本,因此安装新版本需要替换旧版本. 2 ...

  4. C语言优先级

    条件1 && 条件2,如果条件1为假,则条件2语句不执行,因为能判断该表达式为假 条件1 || 条件2,如果条件1为真,则条件2语句不执行,因为能判断该表达式为真 优先级 运算符 名称 ...

  5. UVa 10618 跳舞机

    https://vjudge.net/problem/UVA-10618 这道题目题意很复杂,代码也是参考了别人的,因为自己实在是写不出.d[i][a][b][s]表示分析到第i个箭头时,此时左脚处于 ...

  6. 使用wsHttpBinding构建Message安全模式和UserName授权

    http://www.cnblogs.com/artech/archive/2011/05/22/authentication_01.html https://www.cnblogs.com/Fran ...

  7. 环境安装问题：tensorflow 问题记录 python2.7 和 python3.6发生冲突

    似乎是pip在python2.7和python3.6中发生冲突 我想用pip但是python2里没有装pip 但是tensorflow是和python2相关联的 所以我在python2中装pip的过程 ...

  8. 【转】VMware网络连接模式—桥接、NAT以及仅主机模式的详细介绍和区别

    ☞ 本文主要介绍软件『VMware Workstation(虚拟机)』的相关内容:VMware网络连接模式—桥接.NAT以及仅主机模式的详细介绍和区别. 其下列版本/分支可以参考本文: 全部版本/分支 ...

  9. 如何 Graphics 对象设置背景色

    用 Clear 方法可以轻松地给 Graphics 对象设置背景色. using (Bitmap bmp = new Bitmap(width, height)){    using (Graphic ...

  10. 《剑指offer》第三_一题（找出数组中重复的数字，可改变数组）

    // 面试题3(一):找出数组中重复的数字 // 题目:在一个长度为n的数组里的所有数字都在0到n-1的范围内.数组中某些数字是重复的,但不知道有几个数字重复了, // 也不知道每个数字重复了几次.请 ...