代码：

<!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. win7连接无线网出现黄色感叹号怎么办？

    用win7连接无线网,出现黄色感叹号: 1.IP冲突,“网络中心”-“无线网属性”,手动改下IP,子网掩码,网关,DNS 2.360断网急救箱修复问题

  2. BZOJ 2729: [HNOI2012]排队 排列组合 + 高精度

    Description 某中学有 n 名男同学,m 名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不 ...

  3. Activiti介绍(一)

    工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现某个预期的业务目标 ...

  4. 学习日记2、easyui treeGrid属性及时间

    属性 该属性扩展自数据网格(datagrid),下面是为树形网格(treegrid)添加的属性. 名称 类型 描述 默认值 idField string 定义标识树节点的键名字段.必需. null t ...

  5. 前后端分离及React的一些研究

    前言 在对英才网企业线前端不断的完善过程中,我们尝试进行了前后端分离,引入Node环境.以及在使用React的过程中,自行开发DOM渲染框架,解决React兼容低版本IE的问题,在这个过程中,我们有了 ...

  6. MySQL 安装示例数据库（employee、world、sakila、menagerie 等）

    sakila 示例数据库官方资料及安装说明,注意查看示例数据库支持的版本是否匹配你的数据库. 为了测试,有时候需要大量的数据集,MySQL 官方提供了用于测试的示例数据库,下载页面在 这里. 下面以 ...

  7. Discuz升级 Database Error : pre_common_syscache ADD PRIMARY KEY (cname)【解决办法】

    错误码: 1068Multiple primary key defined Execution Time : 00:00:00:000Transfer Time : 00:00:00:000Total ...

  8. poj2718Smallest Difference （穷竭搜索）

    escription - 题目描述 给定若干位十进制数,你可以通过选择一个非空子集并以某种顺序构建一个数.剩余元素可以用相同规则构建第二个数.除非构造的数恰好为0,否则不能以0打头. 举例来说,给定数 ...

  9. 4期Web安全基础

    介绍了web安全的各种常见漏洞.视频卡顿,建议直接看网易出品的白帽子视频. 类似的教程还有,网易白帽子的教程:参考简书https://www.jianshu.com/p/1b372ca96b87 在看 ...

  10. dpkg:处理软件包 xxx (--configure)时出错

    9月 17 16:11:35 xiakaibi-PC systemd[1]: Starting LSB: Start Jenkins at boot time...9月 17 16:11:35 xia ...