<!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. noip 2012 提高组 day2 部分题解

    这道题有多种解法,我用的是扩展欧几里得算法求到的答案 #include<iostream> #include<fstream> #include<cstdio> u ...

  2. DSDS，双模，双卡，双待，单待，双通，单通，概念及相互关系？【转】

    本文转载自:https://blog.csdn.net/dirk_it/article/details/7178058?utm_source=blogxgwz9 DSDS:双卡双待 DualSimDu ...

  3. 终于在nowcoder爆发了的懒惰

    题目 这类题目我实在忍不了了 Emma,随便做个nowcode比赛题吧,我在oj上也没找到 题意 求\(\sum_{L=1}^{n}\sum_{R=i}^{n}a[k](L<=k<=R)\ ...

  4. zedgraph多个graphpane的处理

    这个问题需要研究,需要使用  zedgraph.masterpane.panelist 其他人做的效果--先预留一个官网的链接http://zedgraph.dariowiz.com/index113 ...

  5. 51NOD 1027 大数乘法

    1027 大数乘法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题   给出2个大整数A,B,计算A*B的结果.   Input 第1行:大数A 第2行:大数B (A,B ...

  6. Unity3D学习笔记（二十三）：事件接口、虚拟摇杆、层级管理和背包系统

    事件接口 IDragHandler(常用):鼠标按下拖动时执行(只要鼠标在拖动就一直执行) IDropHandler:对象拖动结束时,如果鼠标在物体的范围内,执行一次(依赖于IDragHandler存 ...

  7. 51nod 1102 面积最大的矩形（单调栈）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1102 题意: 思路: 做法就是求出每个长方形向左向右所能延伸的最大距离. ...

  8. Python操作Rabbit MQ的5种模式

    python版本:   2.7.14 一 消息生产者代码: # -*- coding: utf-8 -*- import json import pika import urllib import u ...

  9. Goroutines和Channels（三）

    clock服务器每一个连接都会起一个goroutine.在本节中我们会创建一个echo服务器,这个服务在每个连接中会有多个goroutine.大多数echo服务仅仅会返回他们读取到的内容,就像下面这个 ...

  10. Selenium UI自动化测试 Selenium Automatic Testing

    https://www.cnblogs.com/sunada2005/archive/2013/12/22/3486314.html UI Automatic Testing 1. 什么样的项目适合自 ...