<!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. Xenia and Divisors

    Xenia and Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. Potocol Buffer详解

    protocol安装及使用 上一篇博文介绍了一个综合案例,这篇将详细介绍protocol buffer. 为什么使用protocol buffer? java默认序列化效率较低. apache的thr ...

  3. 我是如何用Go语言搭建自己的博客的

    前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所写,可以慢慢来,但是对于Go语言的学习却 ...

  4. C#基础课程之五集合（HashTable,Dictionary）

    HashTable例子: #region HashTable #region Add Hashtable hashTable = new Hashtable(); Hashtable hashTabl ...

  5. 从头学Qt Quick（1） --体验快速构建动态效果界面

    自2005年Qt4发布以来,Qt已经为成千上万的应用程序提供了框架服务,现在Qt已经基本上支持所有的开发平台了,这里面既包含了桌面.嵌入式领域,也包括了Android.IOS.WP等移动操作平台,甚至 ...

  6. Linux的一些命令

    程序 # rpm -qa                # 查看所有安装的软件包 系统 # uname -a               # 查看内核/操作系统/CPU信息 # head -n 1 / ...

  7. Marvel – 将图像和源文件转换成互动，共享的原型

    Marvel 是一款非常简单的工具,将图像和设计源文件转换成互动,共享的原型,无需任何编码.原型可以通过点击几下鼠标就创建出来,能工作在任何设备上的浏览器,包括移动设备,台式机.Marvel 的一个特 ...

  8. 妹味6：ajax与ajax封装

    (功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...

  9. Android View 之进度条+拖动条+星级评论条....

    PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条...       进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此 ...

  10. redis配置文件

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => bytes # 1kb => ...