代码：

<!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. NoSQL数据库的分布式算法详解

    系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...

  2. css中div垂直居中的方法。

    利用绝对定位实现的居中 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  4. LintCode之两两交换链表中的节点

    题目描述: 我的思路: 由题目描述可知,题目是要求将第一个与第二个节点,第三个与第四节点....进行交换,而进行交换时只用将节点的值进行交换即可.需要注意的是:当链表为null或者当链表只有一个节点时 ...

  5. 用redis实现队列实例

    queue input #coding = utf-8__autor__ = 'litao'import redisimport timepool = redis.ConnectionPool(hos ...

  6. android7.0对于SharedPreferences设置模式的限制

    错误信息: 03-28 10:16:12.701   830   932 E AndroidRuntime: FATAL EXCEPTION: Thread-903-28 10:16:12.701   ...

  7. MySQL 服务器性能剖析

    这是<高性能 MySQL(第三版)>第三章的读书笔记. 关于服务,常见的问题有: 如何确认服务器是否发挥了最大性能 找出执行慢的语句,为何执行慢 为何在用户端发生间歇性的停顿.卡死 通过性 ...

  8. Jenkins持续集成_01_Mac安装配置

    前言 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件.在自动化测试中,用来持续集成,跑定时任务进行定时自动化监测.更详细介绍可查看jenkins官网: ...

  9. Visio 2016自定义模具与形状

    Visio 2016自定义模具与形状 0. 什么是模具? 模具:一组形状的集合 1. 新建模具 打开Visio 2016,在空白的文件中选更多形状>>新建模具 2. 编辑模具 新建的模具已 ...

  10. [LeetCode] 260. Single Number III（位操作）

    传送门 Description Given an array of numbers nums, in which exactly two elements appear only once and a ...