简单canvas刮刮乐
好久没玩canvas了,随便写点效果玩玩。要开始重新拾起这门牛x的技术了,工作中不一定能用得上,以后说不定就能发挥用处了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{border: 1px solid #ccc;background: url(http://p0.so.qhmsg.com/t01bf9deea2f89683d5.jpg) center/cover no-repeat}
</style>
</head>
<body>
<canvas id="canvas"></canvas> <script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'); canvas.width = 500;
canvas.height = 500; ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 50; canvas.onmousedown = function(e){
ctx.beginPath();
ctx.lineTo(e.pageX,e.pageY); canvas.onmousemove = function(e){
ctx.lineTo(e.pageX,e.pageY);
ctx.stroke();
}; canvas.onmouseup = function(){
canvas.onmousemove = null;
}
}; </script>
</body>
</html>
简单canvas刮刮乐的更多相关文章
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- HTML5 简单实现刮刮乐效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas刮刮乐游戏等
裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...
- canvas 写一个刮刮乐抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- java多线程 —— 两种实际应用场景模拟
最近做的偏向并发了,因为以后消息会众多,所以,jms等多个线程操作数据的时候,对共享变量,这些要很注意,以防止发生线程不安全的情况. (一) 先说说第一个,模拟对信息的发送和接收.场景是这样的: 就像 ...
- MSSQL 全库搜索 指定字符串
平时在在MSSql中查询数据的时候,想查找,某个字段在数据库中是否存在,并且查询出在哪个表中,哪个字段下面,在不知道的情况下,操作起来会很麻烦,然后就写了一个sql语句,使用起来感觉挺方便的.当然了, ...
- Java并发编程读书笔记(一)
----------------------------------------------<Java并发编程实战>读书笔记-------------------------------- ...
- 安装 rabbitmq ,通过生成器获取redis列表数据 与 Celery 分布式异步队列
一.安装rabbitmq @全体成员 超简易安装rabbitmq文档 1.安装配置epel源rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/ ...
- Java的8种基本数据类型
待整理主题:Java的8种基本数据类型与对应封装类型.拆箱.装箱 =================================================================== ...
- 网站引入外部js
有时想看某个网站下一些数据,需要用到js做一个实时的筛选,却又苦于该网站没用jQuery导致想使用jQuery时,还无法下手,那么下面这段js或许可以帮助你.1.打开我们的chrome调试工具,切换到 ...
- poj3624 Charm Bracelet
http://poj.org/problem?id=3624 题目大意:贝茜去了商场的珠宝店,发现了一个迷人的手镯.当然,她想装最好的魅力(N(1≤N≤3402)可用的魅力).每个魅力提供的列表中都有 ...
- nodejs改变代码不需要重启的方法
1.node 搭建本地服务器 在F:/node文件夹下新建app.js const http = require('http'); http.createServer((req, res) => ...
- ReentrantLock总体概括
一.锁的实现原理: JAVA concurrent包下面的锁是通过AbstractQueuedSynchronizer内的Node类下面的state属性来实现的,并且锁的可重入属性也是通过state实 ...
- 【bzoj2789】 Letters 树状数组
又是一道树状数组求逆序对的题目. 这一题我们可以将第二个串中的每一个字母,与第一个串中的字母做两两匹配,令第二个串第i个字母的值id[i]为该字母与第一个串中的字母匹配到的位置. 然后考虑到所求答案为 ...