<!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. callback 模式

    回调,是一种机制,同时也是一种设计模式. 我们定义一个函数,让能够回调 import _products from './products.json' const TIMEOUT = 100 cons ...

  2. 会话管理之AbpSession

    一.AbpSession的认识 在ABP中提供了IAbpSession的接口用来获取用户和租户的信息,没有使用Asp.Net中的Session,那么AbpSession到底和Session有没有关系? ...

  3. ZOJ Problem Set - 2014 Piggy-Bank【完全背包】

    Description Before ACM can do anything, a budget must be prepared and the necessary financial suppor ...

  4. [No0000145]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈2/4

    前言   虽然在.Net Framework 中我们不必考虑内在管理和垃圾回收(GC),但是为了优化应用程序性能我们始终需要了解内存管理和垃圾回收(GC).另外,了解内存管理可以帮助我们理解在每一个程 ...

  5. [No0000C3]StarUML2 全平台破解方法

    首先,找到安装目录下的"LicenseManagerDomain.js"文件,路径"StarUML\www\license\node\LicenseManagerDoma ...

  6. git add详解

    git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...

  7. 2014年蓝桥杯省赛A组c++第2题(推公式)

    /* 标题:切面条 一根高筋拉面,中间切一刀,可以得到2根面条. 如果先对折1次,中间切一刀,可以得到3根面条. 如果连续对折2次,中间切一刀,可以得到5根面条. 那么,连续对折10次,中间切一刀,会 ...

  8. ms sql server读取xml文件存储过程-sp_xml_preparedocument

    最近要在存储过程中读取xml中节点的值,然后进行sql操作: 要使用到的系统存储过程如下:sp_xml_preparedocument create procedure [dbo].[pro_Test ...

  9. todo: 改变字体的动画

    todo: 截取指定区域的图片, 改变字体的动画

  10. 树和二叉树->基础知识

    树的表示方法 1 一般表示法 2 广义表表示法 3 凹入表示法 树的基本术语: 树:n(n>=0)个结点的有限集 结点:包含一个数据元素及若干指向其子树的分支 结点的度:结点拥有的子树数成为结点 ...