canvas刮刮卡

最新推荐文章于 2021-05-30 22:50:49 发布

羽筠

最新推荐文章于 2021-05-30 22:50:49 发布

阅读量609

点赞数

分类专栏： canvas HTML5 HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/52278719

版权

HTML5 同时被 3 个专栏收录

50 篇文章 0 订阅

订阅专栏

HTML + CSS + JS

38 篇文章 1 订阅

订阅专栏

canvas

22 篇文章 0 订阅

订阅专栏

canvas刮刮卡实例，我修改前功能已经完成

只是移动端开发时，用比例（rem）单位时，测试时所刮位置有些偏，我自己相应改了一下

还有就是刮到一定程度时提示刮奖的结果，之前设置的是一个不定数值（设置不同色，数值都是变动的），要时时监控设置，我改了一下，改成可以设置成刮到指定百分比时提示刮奖结果，可灵活设置，设置如：（

//刮了90%的数值
gnumBIG = (w * h / 16) * .9;

）

还有些要注意的地方加了些备注

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>CANVAS 刮刮卡 demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
*{ margin:0; padding:0;}
canvas{ vertical-align:middle; margin-left:3rem;}
</style>
</head>

<body>
<canvas id="canvas_id"></canvas>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="scraping.js"></script>
<script type="text/javascript">
	init_canvas('获得奖品名称','刮开此处', true , $('#canvas_id').width() , $('#canvas_id').height());
	function scrapingEnd(){
		alert('已刮完');
	}
</script>
</body>
</html>

scraping.js代码：

var canvasID = 'canvas_id';//所使用的canvas的ID
var w , h , gnumBIG;

var mouseDown = false;
var isPop=false;
var canvas = {'temp': null, 'draw': null}; 
var main = null;
var tempctx = null;
var mainctx = null;
var c=null;
var txt='';
var tip='';
var touchable = true;
function init_canvas(text, tips, ta , canvasW , canvasH){
	w = canvasW;
	h = canvasH;
	//刮了90%的数值
	gnumBIG = (w * h / 16) * .9;
	
    txt = text;
    tip = tips;
    touchable = ta;
    
    c=$('#' + canvasID)[0];
    c.height=h;
    c.width=w;
    setupCanvases();
    
}
function recompositeCanvases() {
    
    tempctx = canvas.temp.getContext('2d');
    mainctx = main.getContext('2d');
    canvas.temp.width = canvas.temp.width;
    
    tempctx.drawImage(canvas.draw, 0, 0);

    tempctx.globalCompositeOperation = 'source-atop';
    tempctx.fillStyle="#ff6d56";//刮开后显示奖品的背景色
    tempctx.fillRect(0,0,w,h);
	//刮开后显示奖品的 文字设置
    tempctx.globalCompositeOperation = 'source-atop';
    tempctx.fillStyle="#FFFFFF";
    tempctx.lineWidth=30;
    tempctx.font="bolder 26px Microsoft YaHei";
    tempctx.textAlign="center";
    tempctx.textBaseline="Middle";
    tempctx.fillText(txt,w/2,h/2+7);
    
    mainctx.fillStyle = "#d6d6d6";//未刮开时提示刮开的文字背景色 ，此处色值修改时， 73  行对应数值相应修改
    mainctx.fillRect(0, 0,w,h);
	//未刮开时提示刮开的 文字设置
    mainctx.fillStyle="#666";
    mainctx.lineWidth=20;
    mainctx.font="24px Microsoft YaHei";
    mainctx.textAlign="center";
    mainctx.textBaseline="Middle";
    mainctx.fillText(tip,w/2,h/2+12);

    mainctx.globalCompositeOperation = 'source-atop';
    mainctx.fillStyle="#ffffff";
    mainctx.lineWidth=30;
    mainctx.font="bolder 20px Microsoft YaHei";
    mainctx.textAlign="center";
    mainctx.textBaseline="Middle";
    mainctx.fillText("",w/2,h/2+7);
	
    mainctx.drawImage(canvas.temp, 0, 0);

    var imgData=mainctx.getImageData(0,0,w,h);
    var gnum=0;
    for (var i=0;i<imgData.data.length;i+=64){
        if (imgData.data[i]!=214 ){//此  168  对应以上处 50 行色值对应RGB中R值
            gnum+=1;
        }
    }
	//console.log(gnum);
    if (gnum >= gnumBIG && !isPop){//此处判断是否刮完，可控制台监控设置数据
        scrapingEnd();
        isPop=true;
    }
}
function scratch(canv, x, y, fresh) {
	var ctx = canv.getContext('2d');
	ctx.lineWidth = 20;
	ctx.lineCap = 'round';
	ctx.lineJoin = 'round';

	if (fresh) {
		ctx.beginPath();
		ctx.moveTo(x + 0.01, y);
	}
	ctx.lineTo(x, y);
	ctx.stroke();
}
function mousedown_handler(e) {
	var local = getLocalCoords(c, e);
	mouseDown = true;

	scratch(canvas.draw, local.x, local.y, true);
	recompositeCanvases();

	if (e.cancelable) {
		e.preventDefault();
	}
	return false;
};

function mousemove_handler(e) {
	if (!mouseDown) {
		return true;
	}
	var local = getLocalCoords(c, e);

	scratch(canvas.draw, local.x, local.y, false);
	recompositeCanvases();

	if (e.cancelable) {
		e.preventDefault();
	}
	return false;
};

function mouseup_handler(e) {
	if (mouseDown) {
		mouseDown = false;
		if (e.cancelable) {
			e.preventDefault();
		}
		return false;
	}
	return true;
};
function setupCanvases() {
	main = document.getElementById(canvasID);

	main.width = w;
	main.height = h;

	canvas.temp = document.createElement('canvas');
	canvas.draw = document.createElement('canvas');

	canvas.temp.width = main.width;
	canvas.temp.height = main.height;
	canvas.draw.width = main.width;
	canvas.draw.height = main.height;

	recompositeCanvases();

    if(touchable){
        main.addEventListener('mousedown', mousedown_handler, false);
        main.addEventListener('touchstart', mousedown_handler, false);

        window.addEventListener('mousemove', mousemove_handler, false);
        window.addEventListener('touchmove', mousemove_handler, false);

        window.addEventListener('mouseup', mouseup_handler, false);
        window.addEventListener('touchend', mouseup_handler, false);
    }
}

function getLocalCoords(elem, ev) {
	var ox = 0, oy = 0;
	var first;
	var pageX, pageY;

    var pos = elem.getBoundingClientRect();
    ox = pos.left;
    oy = pos.top;
    var _w = elem.clientWidth;

	if (ev.touches) {
		first = ev.touches[0];
		pageX = first.pageX;
		pageY = first.pageY;
	} else {
		pageX = ev.pageX;
		pageY = ev.pageY;
	}
	return {
		'x' : (pageX - ox)*_w/w,
		'y' : (pageY - oy - (document.documentElement.scrollTop || document.body.scrollTop))*_w/w
	};
}

羽筠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas刮刮卡

canvas刮刮卡实例，我修改前功能已经完成只是移动端开发时，用比例（rem）单位时，测试时所刮位置有些偏，我自己相应改了一下还有就是刮到一定程度时提示刮奖的结果，之前设置的是一个不定数值（设置不同色，数值都是变动的），要时时监控设置，我改了一下，改成可以设置成刮到指定百分比时提示刮奖结果，可灵活设置，设置如：（//刮了90%的数值gnumBIG = (w * h / 16) *
复制链接

扫一扫