<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,canvas {

     margin: 0; padding: 0;

 }

 html {

     height: 100%;

 }

 body {

     background: #000;

 }

 #can {

     background: #FFF url('./images/index.jpg') no-repeat center; backgrond-size: cover; display: block;

     margin: 25px auto; border-radius: 2px; cursor: pointer;

 }

 </style>

 <script type='text/javascript'>

     $( function(){

         var can = $( '#can' ).get( 0 );

         var oCan = can.getContext( '2d' );

         oCan.beginPath();

         oCan.fillStyle = '#BBB';

         oCan.fillRect( 0 , 0 , can.width , can.height );

         oCan.closePath();

         can.onmousedown = function(){

             this.onmousemove = function( ev ){

                 var ev = window.event || ev;

                 var clientX = ev.clientX - can.offsetLeft;

                 var clientY = ev.clientY - can.offsetTop;

                 oCan.fillStyle = 'rgba(132,25,65,.3)';

                 oCan.arc( clientX , clientY , 4 , 0 , 2 * Math.PI , false );

                 oCan.fill();

                 oCan.globalCompositeOperation = 'destination-out';

             };

             this.onmouseup = function(){

                 this.onmousemove = null;

                 this.onmouseup = null;

             };

         };

     } );

 </script>

 </head>

 <body>

     <canvas id='can' width='300' height='168'>检测到您的浏览器版本过低请升级您的浏览器版本以获取更好的用户体验...</canvas>

 </body>

 </html>

[ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示的更多相关文章

  1. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  2. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  3. WEB烟花效果——Canvas实现

    摘要        本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...

  4. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. canvas学习笔记（一）-认识canvas

    canvas是html5新增的一个标签,主要用于图形的绘制.我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了.而在canvas上绘制图形使用的笔,就是js了 ...

  6. 金蝶核算项目余额表卡号余额与天财商龙CRM卡号余额对比

    金蝶核算项目余额表卡号余额与天财尚龙CRM卡号余额对比 由于历史遗留问题,财务一直不调账,修改核算科目卡号与天财商龙CRM系统一直,只能用VBA把卡号前缀修改成两边一致. 再通过,Power BI D ...

  7. 离屏Canvas — 使用Web Worker提高你的Canvas运行速度

    离屏Canvas — 使用Web Worker提高你的Canvas运行速度 原文链接: developers.google.com 现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了! ...

  8. SIM卡是什么意思？你所不知道的SIM卡知识扫盲(详解)【转】

    原文链接:http://www.jb51.net/shouji/359262.html 日常我们使用手机,SIM卡是手机的必须,没有了它就不能接入网络运营商进行通信服务.SIM卡作为网络运营商对于我们 ...

  9. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. Fiddler捕捉ASP.NET WebSite调用WebService、WCF服务

    Fiddler默认会注册一个代理,有时会发现WebSite调用的WebService或者WCF服务无法被捕捉到.其实是由于运行的站点关联的应用程序池使用的账号和我们当前登陆操作系统的用户不同,自然它们 ...

  2. 破解android手机图形锁

    安卓手机的图形锁包括3*3,4*4,5*5的点阵,按次序连接数个点从而达到锁定/解锁的功能.以3*3为例,最少需要连接4个点,最多能连接9个点.在我们进行绘制图形的过程中,每选中这9个点中的一个点,实 ...

  3. Could not load file or assembly 'System.Core, Version=2.0.5.0 和autofac冲突的问题

    在部署到iis的时候会出现这个状况. 解决:下载安装这个补丁 http://support.microsoft.com/kb/2468871 http://www.microsoft.com/zh-c ...

  4. ReflectionToStringBuilder

    1. 使用背景 后台接口需要在接口调用的初期,记录下面查询(修改)对象的参数. 2. 使用方法 通过Apache 工具类 输出entity对象所有属性值 <dependency> < ...

  5. 【转载】如何在Ubuntu上安装LAMP服务器系统？

    转载自:http://os.51cto.com/art/201307/405333.htm [2013年7月25日 51CTO外电头条]为何应该在Ubuntu上安装LAMP服务器?从事Web开发工作时 ...

  6. 将STM32的标准库编译成lib

    转载自:http://www.cnblogs.com/zyqgold/p/3189719.html 以前一直使用STM32的标准库,需要一步步地将代码加进去,将编译选项设置好,然后再编译整个工程. 这 ...

  7. [转载]SharePoint 2013搜索学习笔记之自定义结果源

    搜索中心新建好之后在搜索结果页上会默认有所有内容,人员,对话,视频这四个结果分类,每个分类会返回指定范围的搜索结果,这里我再添加了部门日志结果分类,搜索这个分类只会返回部门日志内容类型的搜索结果,要实 ...

  8. djngo快速实现--使用Bootstrap

    继续django学习之旅,之前我们所做的Django练习前端都非常丑.这节我们使用Bootstrap,顿时使丑陋的页面变成白天鹅. 安装Bootstrap                        ...

  9. stl的优先级队列

    #include <iostream> #include <vector> #include <queue> using namespace std; class ...

  10. IOS开发UI基础UITextView相关属性

    UITextView相关属性 •    text: 设置textView中文本_textView.text = @"Now is the time for all good develope ...