<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<style type="text/css">

			*{

				padding: 0;

				margin: 0;

			}

			.wap{

				width: 200px;

				height: 40px;

				position: relative;

				margin: 20px auto;

				border: 1px solid #3385FF;

			}

			#canvas,.text{

				position: absolute;

				top: 0;

				left: 0;

				width: 200px;

				height: 40px;

			}

			.text{

				line-height: 40px;

				text-align: center;

				font-size: 30px;

				color: gold;

				z-index: 1;

				display: none;

			}

			#canvas{

				z-index: 10;

			}

		</style>

	</head>

	<body>

		<div class="wap">

			<div class="text">一等奖</div>

			<canvas id="canvas" width="200" height="40" ></canvas>

		</div>

	</body>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script type="text/javascript">

		var canvas = document.getElementById('canvas');

		var ctx = canvas.getContext('2d');

		var pos = $('.wap').offset();

		ctx.fillStyle = '#ccc';

		ctx.fillRect(0,0,canvas.width,canvas.height);

		$('.text').css({display:"block"});

		ctx.globalCompositeOperation = 'destination-out';

		ctx.beginPath();

		ctx.fillStyle = 'red';

		ctx.strokeStyle = 'red'

		ctx.lineWidth = 5;

		canvas.onmousedown = function(e){

			this.run = true;

			ctx.moveTo(e.clientX-pos.left,e.clientY-pos.top);

		}

		canvas.onmousemove = function(e){

			if(this.run){

				console.log(e.clientX-pos.left,e.clientY-pos.top)

				ctx.lineTo(e.clientX-pos.left,e.clientY-pos.top);

				ctx.stroke();

			}

		}

		canvas.onmouseup = function(e){

			ctx.stroke();

			this.run = false;

		}

		/*

		 *copy：只绘制新图形，删除其它的所有内容

		 * darker:在图形重叠的地方，其颜色由两个颜色值相减后决定

		 * destination-atop:画布上已有的内容只会在它和新图形重叠的地方保留，新图形绘制于内容之后

		 * destination-in:在新图形及画布上已有图形重叠的地方，画布上已有的重叠内容都保留。所有其他的内容都透明

		 * destination-out:画布原始内容没有重叠的保留，重叠的和新画的，都是透明（刮刮乐）;

		 * destination-over:新图形绘制于画布上已有内容的后面

		 * ligther：在图形重叠的地方，其颜色由两个颜色值相加后决定

		 * source-atop:只有在新图形和画布上已有内容重叠的地方才绘制新的图形

		 * source-in:在新图形和画布上已有内容重叠的地方才绘制新图形。其他内容均透明

		 * source-out:只有在新图形和画布上已有内容不重叠的地方才绘制新的图形

		 * source-over:新图形绘制于画布已有图形的顶部。默认设置

		 * xor：重叠的地方透明,其他的地方正常画

		 *

		 *

		 * */

	</script>

</html>

　　

canvas 写一个刮刮乐抽奖的更多相关文章

  1. python 写一个生成大乐透号码的程序

    """ 写一个生成大乐透号码的程序 生成随机号码:大乐透分前区号码和后区号码, 前区号码是从01-35中无重复地取5个号码, 后区号码是从01-12中无重复地取2个号码, ...

  2. 用Canvas写一个简单的游戏--别踩白块儿

    第一次写博客也不知怎么写,反正就按照我自己的想法来吧!怎么说呢?还是不要扯那些多余的话了,直接上正题吧! 第一次用canvas写游戏,所以挑个简单实现点的来干:别踩白块儿,其他那些怎么操作的那些就不用 ...

  3. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

  4. 利用canvas写一个验证码小功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...

  5. 一步一步用Canvas写一个贪吃蛇

    之前在慕课网看了几集Canvas的视频,一直想着写点东西练练手.感觉贪吃蛇算是比较简单的了,当年大学的时候还写过C语言字符版的,没想到还是遇到了很多问题. 最终效果如下(图太大的话 时间太长 录制gi ...

  6. 用Canvas写一个炫酷的时间更新动画玩玩

    正文必须要写点什么...   // '; var WINDOW_WIDTH = 913; var WINDOW_HEIGHT = 400; var RADIUS = 7; //球半径 var NUMB ...

  7. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. 用canvas写一个简易画图工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

随机推荐

  1. ：eq

    匹配一个给定索引值的元素?只要在html页面每个元素都有索引值,相同的元素按html位置顺序从0开始往下排.给定索引值:给定一个html某个区域的元素的索引值,也是从0开始 不给区域就是从html从d ...

  2. ELK之使用metricbeat收集系统数据及其他程序并生成可视化图表

    将 Metricbeat 部署到您所有的 Linux.Windows 和 Mac 主机,并将它连接到 Elasticsearch 就大功告成啦:您可以获取系统级的 CPU 使用率.内存.文件系统.磁盘 ...

  3. Unix api

    ● 线程 进程的所有信息都被自己的线程共享,包括代码.全局内存.堆.栈.文件描述符. 线程拥有自己的信息,包括线程ID.一组寄存器值.栈.调度优先级和策略.信号屏蔽字.errno变量以及线程的私有数据 ...

  4. Mac Mini2018 开箱（视频）全球首映！Kindle 开箱一并奉上（文字）

    2018.12.9更新 为了方便大家收看我的这个开箱视频,我把视频放在知乎上了,可以参考如下连接即可观看啦: https://zhuanlan.zhihu.com/p/51677467 ------- ...

  5. 关于linux下安装并打开网易云音乐——v 1.0.0

    首先,在网易云音乐官网的下载页面下载linux版本网易云音乐安装包(.deb文件) 下载好之后,在下载文件夹中双击打开文件,等待安装完毕 安装完成之后,直接双击图标是打不开的 需要用管理员命令打开 c ...

  6. ad 层次绘图遇到的元件堆积问题

    元器件复用一般我们使用 reapeat 来复用 总线形式引出各个引脚,有时候我们也可以通过简单的复制实现.但是注意上图 原理图作为一个元件使用,他和单个元件一样必须有唯一ID,名字,不然也会出现冲突, ...

  7. Docker、kubernetes、微服务、SpringBoot/Cloud...好乱！到底要不要学？

    Docker.微服务日益火热的今天,相信标题上这些名词大家都不陌生.但也相信有很多同学并不够清楚他们的概念,不理解它们的关系,也可能有这样的疑惑:不知道跟我有没有关系?要不要学习?怎么去学习?学哪些东 ...

  8. hdu6435 Problem J. CSGO标程讲解以及改正标程的一个错误（本来第一个样例过不了2333） 以及 poj2926 五维曼哈顿距离模板

    比赛的时候抄poj2926的模板,但改不来啊orz #include <iostream> #include <cstdio> #include <cstring> ...

  9. MVC 实用架构设计（〇）——总体设计

    〇.目录 一.前言 二.结构图 三.结构说明 一.前言 一直以来都想写这个系列,但基于各种理由(主要是懒惰),迟迟没有动手.今天,趁着周末的空档,终于把系列的目录公布出来了,算是开个头,也给自己一个坚 ...

  10. AFN拿不到cookie,无法存储cookie

    跟雅思的项目对比,发现 task.currentRequest.allHTTPHeaderFields 这样不能拿到cookie 应该这样取: NSHTTPURLResponse *response ...