[ html canvas 模仿支付宝刮刮卡效果 ] canvas绘图属性 模仿支付宝刮刮卡效果实例演示
2024-08-24 15:03:16
<!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>
最新文章
- [JavaEE]设计模式之SOLID原则
- apache 局域网访问
- Elasticsearch 安装与启动
- asp.net中Ajax控件的用途(二)
- VQuery高级特性
- 一人一python挑战题解
- mysql 中浮点型与定点型记录
- 黑马程序员_Java泛型
- git使用系列(一)
- 那些年,让我们一起着迷的Spring
- [AH/HNOI2017]抛硬币
- 如何使用php生成唯一ID的4种方法
- 搭建基于SornaQube的自动化安全代码检测平台
- D. Diverse Garland
- WEB漏洞 XSS(一)
- 算法基础_递归_给定一个数字n,打印出所有的划分等式
- oracle中order by造成分页错误
- [No000014F]计算机编程语言家族史
- CHERRY G80 3000L 使用一月有感
- php引用变量