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. [Big Data]从Hadoop到Spark的架构实践

    摘要:本文则主要介绍TalkingData在大数据平台建设过程中,逐渐引入Spark,并且以Hadoop YARN和Spark为基础来构建移动大数据平台的过程. 当下,Spark已经在国内得到了广泛的 ...

  2. [转帖]完美解决NVIDIA最新显卡驱动无法安装。（修改教程篇，各机型都可以）

    http://blog.sina.com.cn/s/blog_53e2b55e0100lyx2.html ————————————————————————————————————     前段时间,有 ...

  3. 2014非专业知识学习---be smart

    非专业部分--构建人生 以书籍和网易公开课为主 (1)理财&投资 基金投资相关,好的书籍? (2)哲学总览 <公正>这个看了大半,需要总结归纳.  (必选) 同时结合哲学史,归纳西 ...

  4. Nginx负载均衡和Keepalived的安装设置

    一.Nginx设置负载均衡 (1)upstream的配置 http { upstream backend { #这里设置后台分发的服务器族群,有多少个可以添加,同时设置查询策略 server 192. ...

  5. iOS平台软件开发工具(一)-新建的工程使用CocoaPods工具集成第三方框架

    CocoaPods是一款集合了上千个第三方开源库的开发工具,能够大幅度的提升团队项目的开发效率,降低时间成本. 那么就看一下CocoaPods这个工具在项目中的使用体现吧. 我们马上用ASIHTTPR ...

  6. Scala中function的理解

    在函数式语言中,函数是和value一样地位的一等公民,他可以作为变量,或者作为参数传递给另一个函数 ##作为变量 val f=(x:Int)=>x+1 为啥可以这样写? 由于scala是OOP, ...

  7. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  8. 信息指纹（Fingerprint）及其应用

    1.应用:      i.网页地址去重           网页地址有100个字符,存储5000亿个网址本身需要50T的容量,而Hash表的存储效率只有50%,所有存储爬虫已经爬过的网址需要100T的 ...

  9. iOS开发——Scheme白名单

    问题:在iOS 9下涉及到平台客户端跳转,系统会自动到项目info.plist下检测是否设置平台Scheme.对于需要配置的平台,如果没有配置,就无法正常跳转平台客户端. 报错:This app is ...

  10. 《算法导论》归并排序----merge-sort

    伪代码请见<算法导论>2.3节 merge-sort实现: public class MergeSort {        public static void sort(double [ ...