shadow

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>shadow</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    ctx.shadowColor = '#ff0000';

    ctx.shadowBlur = 10;

    ctx.shadowOffsetX = 20;

    ctx.shadowOffsetY = 30;

    var img = new Image();

    img.src = 'face.jpg';

    img.onload = function() {

        ctx.drawImage(img, 0, 0);

    };

    </script>

</body>

</html>

Canvas 阴影效果的更多相关文章

  1. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

  2. HTML 5 canvas —— 基本语法

    目录 简述 canvas 基础 2D context API 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变 小节 简述 HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 ca ...

  3. 关于HTML 5 canvas 的基础教程

    HTML 5 规范引进了很多新特性,其中最令人期待的之一就是 canvas 元素.HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canv ...

  4. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  5. canvas可视化效果之内阴影效果

    canvas可视化效果之内阴影效果 楔子 在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧. 可以参考 之前的一篇文章 <利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果> ...

  6. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  7. HTML5新标签<canvas>

    基本用法 首先在body中写个<canvas>,设定大小,个人建议大小要在行内设置,不然在部分情况下会发生错误. CSS部分 给canvas加个边框,这边框只是为了方便看出canvas的边 ...

  8. canvas初探2

    2.2 canvas的绘图环境 canvas仅仅只是一个绘图的容器,其内存在一个绘图环境,该环境对象提供了全部的绘图功能. 目前canvas的绘图环境是2d,但canvas规范在着手准备支持其他类型的 ...

  9. WPF阴影效果(DropShadowEffect)

    <TextBlock Text="阴影效果" FontSize="32"> <TextBlock.Effect> <DropSha ...

随机推荐

  1. Contaminated Milk

    Contaminated Milk 题目描述 Farmer John, known far and wide for the quality of the milk produced on his f ...

  2. PAT (Advanced Level) 1082. Read Number in Chinese (25)

    模拟题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  3. mysqldump导入导出mysql数据库

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. OC版二分查找

    二分查找(也称折半查找)是很常见的一种在数组中查找数据的算法,作为一名程序员是应该必须会的.它的基础思想:获取数组的中间值,将数组分割成两份,利用中间值跟指定的值进行比较,如果中间值大于指定的值,就在 ...

  5. python redis list操作

    LPUSH list_name value [value ...] Prepend one or multiple values to a list 从左侧插入值,最早插入的值在最右边 LPUSHX ...

  6. OPENCV形态学操作1

    形态学操作是指基于形状的一系列图像处理操作,包括膨胀,腐蚀,二值化,开运算,闭运算,顶帽算法,黑帽算法,形态学梯度等,最基本的形态学操作就是膨胀和腐蚀. 一.膨胀 首先需要明确一个概念,膨胀和腐蚀都是 ...

  7. MyEclipse构建Web Service（Xfire框架）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 任务要求: 使用Xfire实现一个简单的CalculatorWebServ ...

  8. <Natural Language Processing with Python>学习笔记一

    Spoken input (top left) is analyzed, words are recognized, sentences are parsed and interpreted in c ...

  9. 分布式数据库Google Spanner原理分析

    Spanner 是Google的全球级的分布式数据库 (Globally-Distributed Database) .Spanner的扩展性达到了令人咋舌的全球级,可以扩展到数百万的机器,数已百计的 ...

  10. Spring AOP进行日志记录，管理

    在java开发中日志的管理有很多种.我一般会使用过滤器,或者是Spring的拦截器进行日志的处理.如果是用过滤器比较简单,只要对所有的.do提交进行拦截,然后获取action的提交路径就可以获取对每个 ...