<!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. Linux上强制踢出其他正在登录的用户

    一.查看当前在线用户有几个 w命令 [root@pa1 nginx]#w 13:36:00 up 79 days, 23:50, 3 users, load average: 0.10, 0.07, ...

  2. .NET Core开发日志——Entity Framework与PostgreSQL

    Entity Framework在.NET Core中被命名为Entity Framework Core.虽然一般会用于对SQL Server数据库进行数据操作,但其实它还支持其它数据库,这里就以Po ...

  3. [No0000B0]ReSharper操作指南1/16-入门与简介

    安装指南 在安装之前,您可能需要检查系统要求. ReSharper是一个VisualStudio扩展.它支持VisualStudio2010,2012,2013,2015和2017.安装完成后,您将在 ...

  4. Gym - 101375H MaratonIME gets candies 交互题

    交互题介绍:https://loj.ac/problem/6 题意:输出Q X ,读入><= 来猜数,小于50步猜出就算过样例 题解:根本不需要每次输出要打cout.flush()... ...

  5. zabbix自动发现主机并加入组绑定模板

    在被监控主机多的情况下,怎样将这些主机加入zabbix server进行监控呢?下面将介绍下zabbix自动发现功能 1.创建自动发现规则 创建“规则名称,配置ip范围及检查方式”,点击“增加”,完成 ...

  6. 新装的arcgis10.5特别卡

    在之前装过arcgis10.5,用了一段时间感觉还不错.  由于二次开发要用到AO,当时缺少开发包,所以用了10.4.  现在跟师傅合作开发,要跟他保持一致,所以用了arcgis10.5.  但是装的 ...

  7. mysql学习【第1篇】：初识MySQL

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第1篇]:初识MySQL 只会写代码的是码农:学好数据库,基本能混口饭吃:在此基 ...

  8. Python中给List添加元素的4种方法

    https://blog.csdn.net/hanshanyeyu/article/details/78839266 List 是 Python 中常用的数据类型,它一个有序集合,即其中的元素始终保持 ...

  9. LeetCode 892 Surface Area of 3D Shapes 解题报告

    题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes. Each value v = grid[i][j] represents a tower of ...

  10. 重写Object的equals方法

    Object的equals比较两个对象是否相同,没有重写时比较的是内存地址是否相同(==). 但我们有时候比较的是两个对象中的属性是否相同, 重写equals: package cn.sasa.dem ...