canvas的简单绘图应用の刮刮乐

最新推荐文章于 2023-01-01 21:06:30 发布

阿桃子

最新推荐文章于 2023-01-01 21:06:30 发布

阅读量1.5k

点赞数

分类专栏： Javascript 文章标签： canvas 刮刮乐 HTML5 touch globalCompositeOpera

本文链接：https://blog.csdn.net/taotao6039/article/details/22687983

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

刚好最近有一个需求是实现刮刮乐，服务器随机返回一串字符，我需要把抽奖的过程实现成刮刮乐。

说到这个需求，自然就想到了canvas，在网上找了蛮多案例，又是设置canvas背景图为img，刮开显示这张背景图，又是设置两层canvas，一前一后，忒复杂。

很明显，基本思路是，一个文本层，被一个canvas覆盖，“刮开”canvas后，露出里面的几乎从来不变的文本内容——“谢谢惠顾！”。

HTML代码：

<canvas id="canvas"></canvas>

<div id="prize"><p>谢谢惠顾！</p></div>



<p id="caution">Your browser does not support canvas.</p>

需要这两层叠起来的话，需要在css中写入position:absolute;

然后我们就可以创建canvas上下文来对这个画布进行操作：

(function(){

var canvas = document.getElementById('canvas');

if(canvas.getContext){

//......

}

else{//这里根据画布的上下文对浏览器的兼容做简单的判断

var caution = document.getElementById('caution');

caution.style.display = "block";

}

})();

</script>

在if语句中：

我们取得canvas的上下文，设置画布的默认样式：

var ctx = canvas.getContext('2d');
ctx.fillStyle="gray";

ctx.fillRect(0,0,300,200);

然后指定touch函数要实现的操作：

当手指触碰屏幕时，

function touchStart(e){

//首先我们要阻止浏览器的默认动作，来实现我们自定义的touch

e.preventDefault();

//然后取得所有touch触点

var touches = e.touches;

//......未完.....

}

关于TouchEvent的touches属性，MDN（Mozilla Developer Network）给出的解释是：

一个TouchList对象，包含了所有当前接触触摸平面的触点的Touch对象，无论他们的起始于哪个Element上，也无论他们状态是否发生了变化。只读属性。

当我们手指触屏屏幕，就取得了TouchList对象，而TouchList又是由众多Touch对象组成。每一个Touch对象代表一个人和触摸设备（比如触摸屏和触摸板）接触的触点。

这个Touch对象又有哪些属性呢？（我们这里捡需要的说，详情可参见：https://developer.mozilla.org/zh-CN/docs/DOM/Touch）

Touch.identifier

此 Touch 对象的唯一标识符. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. 只读属性.

Touch.pageX

触点相对于HTML文档上边沿的X坐标，当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。

Touch.pageY

触点相对于HTML文档上边沿的Y坐标，当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。

这里针对每一个touch对象，我们要取得pageX和pageY坐标，用来绘制画布。

touchStart的完整代码：

function touchStart(e){

e.preventDefault();

var touches = e.touches;

var x = touches[0].pageX;

var y = touches[0].pageY;

ctx.beginPath();

ctx.arc(x, y,20,0,2*Math.PI, false);// a circle at the start

ctx.fill();

}

当手指按下时，就能得到一个圆。写touchEnd函数也是同样的逻辑。

然后实现touchMove()，touchmove指的是手指移动的时候，所以不再是touches对象，而是changedTouches。

关于TouchEvent的changedTouches属性，MDN（Mozilla Developer Network）给出的解释是：

一个TouchList对象，包含了代表所有从上一次触摸事件到此次事件的过程中，状态发生改变的触点的Touch对象。只读属性。

代码：

function touchMove(e){