代码：

<!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. oracle基础sql

    二.SQL Structur query language 结构化查询语言,是操作关系型数据库中的对象. DDL(Data definition language 数据定义语言),用于建表或删表操作, ...

  2. edusoho迁移

    1.目录指向web,index文件设为app.php <VirtualHost *:8000> ServerAdmin abcd@mail.com DocumentRoot "E ...

  3. Linux学习篇（二）-软件包管理器、Yum 软件仓库

    红帽软件包管理器 在红帽软件包管理器(rpm)公布之前,Linux 系统软件的安装只能采取"源码包"的方式安装,需要自行编译源码并解决许多依赖关系,所以软件的安装.升级.卸载的难度 ...

  4. kafka centos安装发送消费消息

    1. 请先下载安装文件,java环境需提前安装,解压到指定目录:tar -zxvf kafka_2.11-2.3.1.tgz -C /root/soft/ 从官网下载文件,上传到centos虚拟机指定 ...

  5. Invalid bound statement (not found)--spring boot集成mybatis

    问题: {"timestamp":"2019-07-02T10:21:32.379+0000","status":500,"err ...

  6. ADFS 2016 & Dynamics CRM

    参考:https://blog.csdn.net/vic0228/article/details/80188291 webapp 获取token https://adfs.demo.local/adf ...

  7. C# 加密解密类

    一. MD5  1 防止看到明文 数据库密码,加盐(原密码+固定字符串,然后再MD5/双MD5)  2 防篡改   3 急速秒传(第一次上传文件,保存md5摘要,第二次上传检查md5摘要)   4文件 ...

  8. Marriage Match II 【HDU - 3081】【并查集+二分答案+最大流】

    题目链接 一开始是想不断的把边插进去,然后再去考虑我们每次都加进去边权为1的边,直到跑到第几次就没法继续跑下去的这样的思路,果不其然的T了. 然后,就是想办法咯,就想到了二分答案. 首先,我们一开始处 ...

  9. 题解1433. 数码问题 (Standard IO)

    Description Alice有一个N*N的格子,把1-N^2按照从上到下从左到右的顺序填进表格中,允许在表格上进行两种操作: (1) 旋转行——这一行的数向右移动一个位置,而最后一列的数会移到第 ...

  10. vs code配置C/C++开发环境

    第一步:下载 Vs Code 点击链接下载Vs Code 下载版本  并安装 https://code.visualstudio.com/ 点击 Download for Windwos 安装时  如 ...