<!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. cobbler搭建本地的yum仓库源

    cobbler自动化安装参考文档 https://www.cnblogs.com/minseo/p/8537266.html 使用cobbler可以快速搭建一个本地的yum仓库 cobbler rep ...

  2. php实现简单消息发送+极光推送系统

    前几天刚写完的一个东西,写的比较简单,没有使用其他插件,原生php+计划任务实现 极光推送的代码 /* $receiver="registration_id" : [ " ...

  3. BZOJ 1002 - 轮状病毒 - [基尔霍夫矩阵（待补）+高精度]

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1002 Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生 ...

  4. [No0000134]C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  5. 创建ReactNative的iOS项目

    http://reactnative.cn/docs/integration-with-existing-apps/ 1.安装好ReactNative开发环境 2.安装好CocoaPods 3.创建项 ...

  6. Exception 06 : org.hibernate.NonUniqueObjectException: A different object with the same identifier value was already associated with the session :

    异常名称: org.hibernate.NonUniqueObjectException: A different object with the same identifier value was ...

  7. day0318装饰器和内置函数

    一.装饰器 1.装饰器: 解释:装饰器的本事就是一个函数,不改动主代码的情况下,增加新功能.返回值也是一个函数对象. 2.装饰器工作过程 import time def func(): print(' ...

  8. mac mysql提示mysql.sock'

    Warning: World-writable config file '/Applications/XAMPP/xamppfiles/etc/my.cnf' is ignored ERROR 200 ...

  9. python递归,装饰器,函数, 高阶函数

    在函数内部,可以调用其它函数,如果一个函数在内部调用自身本身,这个函数就是递归函数 递归特性:1.必须有一个明确的结束条件 2.每次进入更深一层递归时,问题规模比上次递归都有所减少(10-8-5等) ...

  10. [GDOI2018]滑稽子图

    题目链接:[被和谐] 题目大意:对于一棵树$(V,E)$,对于$S\subset V$,$f(S)$为点集$S$的导出子图的边数.求$\sum_{S\subset V}f(S)^k$ 这里的导出子图说 ...