<!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 字符串编码

    通过字符串的decode和encode方法 1 encode([encoding,[errors]]) #其中encoding可以有多种值,比如gb2312 gbk gb18030 bz2 zlib ...

  2. VC++之自定义消息

    用户可以自定义消息,在应用程序中主动发出,这种消息一般用于应用程序的某一部分内部处理. 实例说明: 当用户按键盘上的光标上移键时,程序发送用户自定义消息,在对应的消息响应函数中弹出消息对话框,显示消息 ...

  3. [Git] Git 常用技巧

    版本对比 1. 对比两个 COMMIT git diff <commit> <commit> 2. 对比 COMMIT 和父 COMMIT git diff <commi ...

  4. [Math] Beating the binary search algorithm – interpolation search, galloping search

    From: http://blog.jobbole.com/73517/ 二分检索是查找有序数组最简单然而最有效的算法之一.现在的问题是,更复杂的算法能不能做的更好?我们先看一下其他方法. 有些情况下 ...

  5. [Node.js] 使用File API 异步上传文件

    原文地址:http://www.moye.me/2014/11/05/html5-filereader/ 最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进 ...

  6. 【干货分享】Google 的设计准则，素材和资源

    在谷歌,他们说, “专注于用户,所有其它的就会水到渠成 ”.他们遵循设计原则,寻求建立让用户惊喜的用户体验.谷歌一直挑战自己,为他们的用户创造一种视觉语言,综合优秀设计的经典原则和创新.谷歌设计规范是 ...

  7. Web 项目可能会用到的20款优秀的开源工具

    开源的应用程序和它们的源代码可以免费获得,因为版权是属于任何进行过修改或者提交代码的人.大多数提供开源软件的公司都可以建立行业标准,因此可以获得有利的竞争优势. 很多的开源应用程序和工具都有很强的替代 ...

  8. 探索jdk8之ConcurrentHashMap 的实现机制

    在介绍ConcurrentHashMap源码之前,很有必要复习下java并发编程中的一些基础知识,比如内存模型等. 存储模型 并发编程中的三个概念 1.原子性 2.可见性 3.重排序 对HashMap ...

  9. java:[1,1] 需要class, interface或enum

    状态: cmd编译.java文件时报异常:java:[1,1] 需要class, interface或enum异常原因: 主要原因是java文件的编码问题. 在中文操作系统中,使用一贯的"j ...

  10. 三分 --- CSU 1548: Design road

    Design road Problem's Link:   http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1548 Mean: 目的:从(0,0)到 ...