<!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. python 自动化测试资料

    python 自动化测试资料: http://yunpan.cn/QXVvwVJsAsPnb

  2. php生成随机密码(php自定义函数)转自先锋教程网

    php生成随机密码(php自定义函数) 时间:2015-12-16 20:43:49来源:网络 导读:php随机密码的生成代码,使用php自定义函数生成指定长度的随机密码,密码规则为小写字母与数字的随 ...

  3. SNF开发平台WinForm之十四-站内发送系统信息-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: .组装站内信息发送实体对象. SNFService SNFService = new SNFService(); if (this.ucUser.SelectedIds ! ...

  4. Linux高级编程--10.Socket编程

    Linux下的Socket编程大体上包括Tcp Socket.Udp Socket即Raw Socket这三种,其中TCP和UDP方式的Socket编程用于编写应用层的socket程序,是我们用得比较 ...

  5. [Node.js] Express的测试覆盖率

    原文地址:http://www.moye.me/2014/12/03/express_coverage/ 引子 有群友问到Express怎么做 单元测试/覆盖率测试,这是上篇所遗漏的,特此补上 Exp ...

  6. js-条件语句、循环语句

    一. 常见条件语句 if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if... ...

  7. 前端翻译：Activating Browser Modes with Doctype

    一.前言 原本备份: http://www.cnblogs.com/fsjohnhuang/p/3830623.html 由于本人英语能力有限,译本内容难免有误,望各位指正! 本译文不含附录部分,请知 ...

  8. [阅读]个人阅读作业week7(200)

    个人作业week7——前端开发感想总结 此次作业因本人(学号1200)长期不上博客所以密码遗忘,输错次数过多账号被锁,所以在SivilTaram同学的博客下挂我的作业,希望助教老师谅解~谢谢! 1. ...

  9. 请求参数到表述层的类型转换——Struts2

    一.简介 说明:HTTP 协议传输数据没有类型的概念,在服务器端是通过 request.getParameter().request.getParameterValue() 方法得到请求参数为 Str ...

  10. Tempdb的并发阻塞

    9.3 Tempdb的并发阻塞 在介绍Tempdb的并发问题前,先介绍几个比较特殊的数据页. PFS(Page Free Space),用于标识数据页空间的使用情况,以字节标识,可以表示数据页使用百分 ...