<!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. Jwt 中 token应该存储到哪里？

    关于 token 的存储问题 JWT: csrf 攻击无法获取第三方的 cookie,而是直接使用 cookie进行查询的时候会自动携带 cookie. xss攻击通过代码注入可以获取 cookie. ...

  2. javascript与java正则表达式写法的区别

    Js验证写法:(转义符\) var str = "待验证文本"; var regular = new RegExp(/这里是正则表达式/); if (regular.test(st ...

  3. day2 二、编程语言、python解释器和变量

    一.编程语言分类 1.机器语言 直接用计算机能理解的二进制指令编写程序,直接控制硬件,需要了解硬件的操作细节. 2.汇编语言 用英文标签取代二进制编写程序,也是直接控制硬件,也需要了解硬件的操作细节. ...

  4. PHP一个小函数

    // function makeTemp($fileName="index",$ftype=0) { $tempPath="xx/xxxx/{$fileName}.htm ...

  5. java8集合--LinkedList纯源码

    package Queue; import java.util.*; import java.util.function.Consumer; /** * 双端队列主要实现list接口和Deque接口, ...

  6. Sharding-JDBC读写分离

    https://www.jianshu.com/p/8bbc8ca63037 官网文档:当当网,架构师张亮 http://shardingsphere.io/document/current/cn/m ...

  7. JQuery中数组的创建与使用

    一.创建数组的方式: 1.定义并赋值 var str = ['java', 'php', 'c++', 'c#', 'perl', 'vb', 'html', 'css']; 2.用{}定义后赋值: ...

  8. [skill][telnet] 用telnet获取一个网页

    一直也搞不懂, telnet到底是干嘛用的. 然而, 它可以得到一个网页. /home/tong/Data/performance_test [tong@T7] [:] > telnet nyu ...

  9. kafka读书笔记《kafka权威指南》2018

    1.有了分区,可以多个client消费一个topic,有了分区,可以将一个topic 分散在多个broker 2.kafka通过复制实现可靠,通过横向扩展提高性能(如增加分区.客户端.增加broker ...

  10. odoo 权限设置

    *权限管理的四个层次    # 菜单级别:不属于指定菜单所包含组的用户看不到该菜单,不客全,只是隐藏                 菜单,若知道菜单ID,仍然可以通过指定URL访问    # 对象级 ...