代码：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>绘制阴影</title>

   <script>

       function init()  {

           var canvas=document.getElementById('canvas');

           var ctx=canvas.getContext("2d");

           ctx.shadowBlur=1.5;

           ctx.shadowColor="red";

           ctx.shadowOffsetX=5;

           ctx.shadowOffsetY=5;

           ctx.strokeStyle="blue";

           ctx.font=" italic 40px 宋体";

           ctx.strokeText("你好",200,200);

       }

   </script>

</head>

<body   onload="init();">

<canvas  id="canvas" width="400"  height="300"  style="border:2px blueviolet solid"></canvas>

</body>

</html>

　　效果：

2017-09-08  12:36:38

HTML5 绘制阴影的更多相关文章

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

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

  2. HTML5 Canvas阴影用法演示

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

  3. html5--5-15 绘制阴影

    html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  4. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  5. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  6. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. iOS：quartz2D绘图（给图形绘制阴影）

    quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...

  8. Canvas 给图形绘制阴影

    /** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementById("demo6"); if ( ...

  9. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C语言 为什么要引入指针？

    https://blog.csdn.net/chengxuyuan997/article/details/81231679 正文 在说为什么引入指针这个问题前先带大家了解一下什么是指针? 指针最为简短 ...

  2. 51nod 1205 流水线调度

    1205 流水线调度 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 N个作业{1,2,…,n}要在由2台机器M1和M2组成的流水线上完成加工.每个 ...

  3. 如何查看MySQL数据库的版本

    如何查看MySQL数据库的版本 一.总结 一句话总结: SQL语句:select version(); 命令行:mysql -V 或 mysql --version 二.三种方法查看MySQL数据库的 ...

  4. MySQL innodb的组合索引各个列中的长度不能超过767，

    MySQL索引的索引长度问题   MySQL的每个单表中所创建的索引长度是有限制的,且对不同存储引擎下的表有不同的限制. 在MyISAM表中,创建组合索引时,创建的索引长度不能超过1000,注意这里索 ...

  5. 'utf-8-sig api_res = r.data.decode('utf-8') json_ = json.loads(api_res)

    东莞市 东莞城市标志 东莞城市标志 1985年,广东省东莞县经国务院批准列为珠江三角洲经济开发区,同年9月撤消东莞县,建立(县级)东莞市,1988年1月升格为地级市.东莞市是全国五个不设市辖区的地级市 ...

  6. Ajax对数据的删除与查看

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

  7. 16/8/23-jQuery完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片

    引用地址:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最 ...

  8. SmokeTest测试流程

    没办法了,本来是表格,但是粘贴不过来 测试目的: 用于检测该版本在基本的应用场景下,基本的功能是否满足. 测试前提: 发货版本 示例:ATV9冒烟测试测试项解读 表格获取:Google ATV hel ...

  9. ICPC2019上海区域赛 部分题解(正在更新)

    K. Color Graph 题意: 给定一个简单图,点个数<=16,删去部分边后,使得该图中无边数为奇数得环,问剩下的边数最大为多少? 思路: 如果一个图中无奇数边的环,那么这个图一定是个二分 ...

  10. Altium Designer(AD)使用笔记

    在PCB中间打洞,螺丝孔等 制作PCB螺丝孔 1 在Keepout层首先绘制一个圆形(矩形): 2 在绘制PCB时,选中该图形,Tool>>Convert>>create bo ...