代码：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.  
  6.     <title>绘制阴影</title>
  7.    <script>
  8.        function init()  {
  9.            var canvas=document.getElementById('canvas');
  10.            var ctx=canvas.getContext("2d");
  11.            ctx.shadowBlur=1.5;
  12.            ctx.shadowColor="red";
  13.            ctx.shadowOffsetX=5;
  14.            ctx.shadowOffsetY=5;
  15.            ctx.strokeStyle="blue";
  16.            ctx.font=" italic 40px 宋体";
  17.            ctx.strokeText("你好",200,200);
  18.  
  19.        }
  20.  
  21.    </script>
  22.  
  23. </head>
  24. <body   onload="init();">
  25. <canvas  id="canvas" width="400"  height="300"  style="border:2px blueviolet solid"></canvas>
  26. </body>
  27. </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. python 全栈开发，Day9(函数的初始，返回值，传参，三元运算)

    一.函数的初始 比如python没有len()方法,如果求字符串的长度 使用for循环 s = 'asdfadsf' count = 0 for i in s: count += 1 print(co ...

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

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

  3. apache如何发布地图服务

    svg jpg Tomcat和apache是什么关系呢?:https://www.cnblogs.com/zangdalei/p/8057325.html geoserver又是怎么来的呢? Tomc ...

  4. Hadoop学习之路（二）HDFS基础

    1.HDFS前言 HDFS:Hadoop Distributed File System,Hadoop分布式文件系统,主要用来解决海量数据的存储问题. 设计思想 分散均匀存储 dfs.blocksiz ...

  5. PHP 常用算法【总结】

    一.声明数组 ini_set("max_execution_time", "12000"); $arr = [2,4,1,7,33,4,5,6,7,11,1,0 ...

  6. 1208D Restore Permutation

    题目大意 给你一个序列s 让你求一个1~n的序列 使得对于第i个位置它前面所有小于p[i]的数的和恰好为s[i] 分析 我们可以从后往前确定每一位 每次一二分找到恰好等于s[i]的数 但是我们发现这样 ...

  7. JSP+JavaBean 登陆验证

    1.java package cn.gs.ly; import java.util.HashMap; import java.util.Map; public class Register { pri ...

  8. upc组队赛17 Stone Game【极小值】

    Stone Game 题目链接 题目描述 Alice and Bob are always playing game! The game today is about taking out stone ...

  9. sed查找实例：mysql_process.sh

    标准 #!/bin/bash # FILE_NAME=/home/roo/Desktop/shell_code/day6/my.cnf # 获取所有的片段 function get_all_segme ...

  10. Netty内存池及命中缓存的分配

    内存池的内存规格: 在前面的源码分析过程中,关于内存规格大小我们应该还有些印象.其实在Netty 内存池中主要设置了四种规格大小的内存:tiny 是指0-512Byte 之间的规格大小,small 是 ...