代码：

<!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. Jmeter参数化控件意见收集

    1.可以读取EXCEL,可以自定义SHEET,行和列: 2.数据可以加密传输,加密方式如下: 1)SHA1 2)SHA224 3)SHA256 4)SHA384 5)SHA512 6)MD5 7)Hm ...

  2. Spark在MaxCompute的运行方式

    一.Spark系统概述 左侧是原生Spark的架构图,右边Spark on MaxCompute运行在阿里云自研的Cupid的平台之上,该平台可以原生支持开源社区Yarn所支持的计算框架,如Spark ...

  3. 862C - Mahmoud and Ehab and the xor（构造）

    原题链接:http://codeforces.com/contest/862/problem/C 题意:给出n,x,求n个不同的数,使这些数的异或和为x 思路:(官方题解)只有n==2&&am ...

  4. 匈牙利算法&模板O（mn）HDU2063

    #include<cstdio> #include<cstring> #define maxn 510 using namespace std; int k,g,b,x,y,a ...

  5. 计算一段日期内的周末天数的php代码（星期六，星期日总和）

    代码如下: /*| Author: Yang Yu <niceses@gmail.com>| @param char|int $start_date 一个有效的日期格式,例如:200910 ...

  6. C语言 | 线段树

    #include<stdio.h> #define MAX_LEN 1000 void build_tree(int arr[],int tree[],int node,int start ...

  7. 图论 Algorithms

    1) Dijkstra 基本思路:更新每个点到原点的最短路径:寻找最短路径点进行下一次循环:循环次数达到 n - 1 次说明每个点到原点的最短路已成,停止程序. 1 function Dijkstra ...

  8. Type Interceptors

    Type Interceptors Castle.Core, part of the Castle Project, provides a method interception framework ...

  9. Ehcache配置项及持久化到硬盘

    EhCache 常见的配置项: cache元素的属性 name:缓存名称 maxElementsInMemory:内存中最大缓存对象数 maxElementsOnDisk:硬盘中最大缓存对象数,若是0 ...

  10. 【CDN+】 Spark入门---Handoop 中的MapReduce计算模型

    前言 项目中运用了Spark进行Kafka集群下面的数据消费,本文作为一个Spark入门文章/笔记,介绍下Spark基本概念以及MapReduce模型 Spark的基本概念: 官网: http://s ...