canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩!
demo一:刮刮乐
舍不得买2块钱的刮刮乐,就只能写个类似的功能过过彩票瘾了!
布局
<div id="lottery" style="width:300px;height:500px;margin:10px;border-radius:5px;float:left;">
<div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">NICK彩票</div>
<div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column;">
<span>祝</span>
<span>君</span>
<span>中</span>
<span>奖</span>
</div>
<div id="canvasArea" style="width:300px;height:200px;position:relative;">
<div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:56px;color:indianred;">一等奖</div>
<canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"></canvas>
</div>
</div>
这段html要注意的地方有2个:
- flex布局,将‘祝君中奖’垂直居中,目前还有兼容问题,不过看我们大前端的发展趋势,应该很快就能搞定了;
- canvas和‘一等奖’div的z-index问题,将canvas的z-index设置较高,使其置于一等奖div上面。
设置canvas画布
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
绘制刮奖区域
context.fillStyle='#A9AB9D';
context.fillRect(10,10,280,180);
context.fillStyle='#000';
context.font='50px Arial';
context.fillText('刮奖区',75,115);
- 填充颜色;
- 绘制实心矩形;
- 设置字体颜色;
- 设置字体大小类型;
- 绘制实心字体。
以上都是canvas基础api,看w3c就ok了。
为了好看,我将‘祝君中奖’加个字体变色
setInterval(function(){
document.getElementById('txt').style.color = document.getElementById('txt').style.color=='peachpuff' ? 'yellow' : 'peachpuff';
},500);
刮奖功能函数
var brush=function(){//刮奖
context.clearRect(event.offsetX,event.offsetY,20,20);
};
为canvas元素onmousedown和onmouseup事件
canvas.onmousedown = function(){
// 鼠标按下时 - 绑定鼠标跟随事件
bindHandler(canvas,'mousemove',brush,false);
}
canvas.onmouseup = function(){
// 停止刮奖功能 - 解绑鼠标跟随事件
removeHandler(canvas,"mousemove",brush,false);
}
这里的事件绑定与解绑我上篇博文有封装,最后完整代码也有!
刮刮乐happy到底结束!最后附上完整代码,再看看效果吧!
demo二:画笔
布局
<div style="width:300px;height:500px;margin:10px;border-radius:10px;overflow:hidden;float:right;">
<canvas id="canvas2" width="300px" height="500px" style=""></canvas>
</div>
设置canvas画布
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
画笔功能函数
var draw=function(){
context2.fillRect(event.offsetX,event.offsetY,10,10);
};
为canvas元素onmousedown和onmouseup事件
context2.font='20px Arial';
context2.strokeText('NICK画笔',100,30);//写个头
//1. 为canvas元素onmousedown和onmouseup事件
canvas2.onmousedown = function(){
// 启用画笔功能 - 绑定鼠标跟随事件
bindHandler(canvas2,'mousemove',draw,false);
}
canvas2.onmouseup = function(){
// 停止画笔功能 - 解绑鼠标跟随事件
removeHandler(canvas2,"mousemove",draw,false);
}
画图工具的画笔功能到底结束!
附上完整代码:
代码写完了,我也想说点其他的:
上面js代码中,有不少注释,我将其分为几个区域:插件方法封装区、命名区、功能实现区、刮刮乐区以及画笔区等,我感觉这样写加上一些注释,能使代码能加简洁,便于以后的维护!当然这只是个人观点,欢迎各位点击我博客右边公告栏的qq交流交流!
最后附上:
上篇博文:事件绑定与解绑!(只是一个简单的封装)
来看看效果,玩玩吧!
canvas刮刮乐的更多相关文章
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...
- HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- canvas刮刮乐游戏等
裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...
- canvas 写一个刮刮乐抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas之刮刮乐
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- canvas 实现刮刮乐
在解决问题前,我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js 能够调用它来进行绘图. ...
随机推荐
- 【转】beancopy的替代方案
链接:http://jingyan.baidu.com/article/215817f7d55b871edb14235b.html 最近在项目中接触到了BeanUtils.copyProperties ...
- squid代理服务器搭建及配置
系统环境:CentOS release 6.5 (Final)(最小化安装) 一.安装squid # yum -y install squid 二.编辑配置文件(正向代理) # vim /etc/sq ...
- LeetCode(169)Majority Element and Majority Element II
一个数组里有一个数重复了n/2多次,找到 思路:既然这个数重复了一半以上的长度,那么排序后,必然占据了 a[n/2]这个位置. class Solution { public: int majorit ...
- hdu3594 强连通(仙人掌图)
题意:给定一张有向图,问是否是仙人掌图.仙人掌图的定义是,首先,这张图是一个强连通分量,其次所有边在且仅在一个环内. 首先,tarjan可以判强连通分量是否只有一个.然后对于所有边是否仅在一个环内,我 ...
- MFC开发上位机到底用Dialog结构还是文档结构?
最近要跟着导师一起开发一款大型上位机.MFC新人在考虑用对话框结构还是文档结构. 虽然说书上说大型结构的软件都需要文档结构,但是目前来看,对话框可以实现功能,并且对话框的程序更小一些,节省资源加载速度 ...
- JSBinding / Run Samples
This document shows you how to run JSBinding 2048 sample in Editor. First of course, create an empty ...
- Unity Shaders
推荐!! Unity技术人员的博客: http://aras-p.info/blog/ Unity 中的 Shader 按照使用方式来分的话,分为3种: Surface Shader 受光照影响 Cg ...
- easyUI之message
message组件,依赖于window组件.progressbar组件两个面板. 它有几个不同的显示风格,与vb中的msgbox相对应,有alert.progrss.confirm.prompt等形式 ...
- asp.net MVC 帮助助手和函数( @helper @functions)
asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们 ...
- Zend 安装 OpenExplorer插件
转自:http://blog.csdn.net/binyao02123202/article/details/8954249 OpenExplorer是一款打开导进来的项目文件或文件夹所在磁盘的位置的 ...