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. Navicate for mysql 数据库设计-数据库分析

    在使用Navicate for mysql进行数据库设计时,如果要分析已有db的表结构,则可以将已经分析过的表放入一个新建的组中,把精力更加集中在剩下的表中,以免受到干扰.

  2. iOS之UITableView的上拉刷新

    #import "ViewController.h" #import "UITableView+PullRefresh.h" @interface ViewCo ...

  3. Unity3D中的函数方法及解释

    一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...

  4. Backbone视图渲染React组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. sql server 2008 学习笔记

    sql server 2008 删除已有的实例 想从setup.exe中区卸载,没找到. 原来还是要从控制面板中卸载,卸载Microsoft SQL Server 2008 卸载界面会提示让你选择要删 ...

  6. Mybatis学习（6）动态加载、一二级缓存

    一.动态加载: resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: 如 ...

  7. JDK8新特性面试

    java8:http://ifeve.com/java-8-features-tutorial/ 一.Lambda表达式和函数式接口 Lambda表达式(也叫做闭包) 它允许我们将一个函数当作方法的参 ...

  8. Eclipse配置Git发布项目到Github

    很牛叉的博客http://blog.csdn.net/luckarecs/article/details/7427605 一.安装插件 菜单栏Help --> Install New Softw ...

  9. 315.Count of Smaller Numbers After Self My Submissions Question

    You are given an integer array nums and you have to return a new counts array. Thecounts array has t ...

  10. Mybatis中常见的SQL DML

    1.sql select 查询 <select id="query" resultType="CfCurrbusilogEntity" > sele ...