用Canvas画一个刮刮乐

前端 专栏收录该内容
332 篇文章 6 订阅

Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。canvas是HTML5中的新元素,使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。

在国外问答网站Quora上,许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活,能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。

学习网址和资料:
菜鸟教程:http://www.runoob.com/html/html5-canvas.html
http://www.w3school.com.cn/tags/tag_canvas.asp

图片.png

用Canvas画一个刮刮乐步骤:

一:创建一个画布(Canvas)

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas> 
二:使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

var isdown = false,
cover = document.getElementById("cover"),//首先,找到 <canvas> 元素:
covercanvas = cover.getContext("2d");//然后,创建 context 对象:
三:绘制矩形

//设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
//canvas 是一个二维网格。canvas 的左上角坐标为 (0,0),上面的 fillRect 方法拥有参数 (0,0,400,200)。意思是:在画布上绘制 400x200 的矩形,从左上角开始 (0,0)。

covercanvas.fillStyle="transparent";
covercanvas.fillRect(0,0,400,200);
四:移动端阻止浏览器默认功能

由于是长按事件,要在移动端阻止浏览器默认功能。

function isDown(e){
e.preventDefault();
isdown=true; 
}
function isUp(e){
isdown=false; 
}
..........
五:鼠标事件

需要改变的内容为_width,_height,touchTop,touchLeft这几个参数,根据自身画布的位置自行计算即可。

function draw(e) {
           e.preventDefault();
           if(isdown) {
               if(e.changedTouches) {
                   e = e.changedTouches[e.changedTouches.length - 1];
               }
               var _height = parseInt((window.innerHeight - 400) / 2),
                   _width = parseInt((window.innerWidth - 400) / 2),
                   touchTop = e.clientY - _height,
                   touchLeft = e.clientX - _width;
               with(covercanvas) {
                   beginPath();
                   arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
                   fill();
               }
           }
           //alert(touchTop);
       }
实际例子(完整代码)
<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title>用Canvas画一个刮刮乐</title>
       <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
       <style>
           .content,
           .cover {
               width: 400px;
               height: 400px;
               position: absolute;
               left: 50%;
               top: 50%;
               margin: -200px 0 0 -200px;
           }
           
           .content {
               font-size: 48px;
               line-height: 200px;
               text-align: center;
               color: red;
           }
           
           h3 {
               text-align: center;
               line-height: 200px;
               color: deepskyblue;
           }
       </style>
   </head>

   <body>
       <h3>刮刮乐</h3>
       <div class="content">蚂蚁会员vip</div>
       <!-- 创建一个画布(Canvas)-->

       <canvas id="cover" class="cover" width="400" height="400"></canvas>

   </body>
   <script>
       /*使用 JavaScript 来绘制图像*/
       var isdown = false,
           cover = document.getElementById("cover"), //首先,找到 <canvas> 元素:
           covercanvas = cover.getContext("2d"); //然后,创建 context 对象:

       //下面的两行代码绘制一个灰色的矩形:
       //设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
       covercanvas.fillStyle = "transparent";
       covercanvas.fillRect(0, 0, 400, 200);

       //canvas 是一个二维网格。
       //canvas 的左上角坐标为 (0,0)

       //上面的 fillRect 方法拥有参数 (0,0,400,200)。
       //意思是:在画布上绘制 400x200 的矩形,从左上角开始 (0,0)。
       function fillter(canvas) {
           canvas.fillStyle = "#ccc";
           canvas.fillRect(0, 0, 400, 200);
       }

       function isDown(e) {
           e.preventDefault();
           isdown = true;
       }

       function isUp(e) {
           isdown = false;
       }

       function draw(e) {
           e.preventDefault();
           if(isdown) {
               if(e.changedTouches) {
                   e = e.changedTouches[e.changedTouches.length - 1];
               }
               var _height = parseInt((window.innerHeight - 400) / 2),
                   _width = parseInt((window.innerWidth - 400) / 2),
                   touchTop = e.clientY - _height,
                   touchLeft = e.clientX - _width;
               with(covercanvas) {
                   beginPath();
                   arc(touchLeft, touchTop, 10, 0, Math.PI * 2);
                   fill();
               }
           }
       
       }

       fillter(covercanvas);
       covercanvas.globalCompositeOperation = 'destination-out';
       cover.addEventListener('touchstart', isDown);
       cover.addEventListener('touchmove', draw);
       cover.addEventListener('touchend', isUp);
       cover.addEventListener('mousemove', draw);
       cover.addEventListener('mousedown', isDown);
       cover.addEventListener('mouseup', isUp);
   </script>

</html>

Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。

原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】

  • 0
    点赞
  • 6
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
程序员的必经之路! 【限时优惠】 现在下单,还享四重好礼: 1、教学课件免费下载 2、课程案例代码免费下载 3、专属VIP学员群免费答疑 4、下单还送800元编程大礼包 【超实课程内容】  根据《2019-2020年中国开发者调查报告》显示,超83%的开发者都在使MySQL数据库。使量大同时,掌握MySQL早已是运维、DBA的必备技能,甚至部分IT开发岗位也要求对数据库使和原理有深入的了解和掌握。 学习编程,你可能会犹豫选择 C++ 还是 Java;入门数据科学,你可能会纠结于选择 Python 还是 R;但无论如何, MySQL 都是 IT 从业人员不可或缺的技能!   套餐中一共包含2门MySQL数据库必学的核心课程(共98课时)   课程1:《MySQL数据库从入门到实战应》   课程2:《高性能MySQL实战课》   【哪些人适合学习这门课程?】  1)平时只接触了语言基础,并未学习任何数据库知识的人;  2)对MySQL掌握程度薄弱的人,课程可以让你更好发挥MySQL最佳性能; 3)想修炼更好的MySQL内功,工作中遇到高并发场景可以游刃有余; 4)被面试官打破沙锅问到底的问题问到怀疑人生的应聘者。 【课程主要讲哪些内容?】 课程一:《MySQL数据库从入门到实战应》 主要从基础篇,SQL语言篇、MySQL进阶篇三个角度展开讲解,帮助大家更加高效的管理MySQL数据库。 课程二:《高性能MySQL实战课》主要从高可篇、MySQL8.0新特性篇,性能优化篇,面试篇四个角度展开讲解,帮助大家发挥MySQL的最佳性能的优化方法,掌握如何处理海量业务数据和高并发请求 【你能收获到什么?】  1.基础再提高,针对MySQL核心知识点学透,对; 2.能力再提高,日常工作中的代码换新貌,不怕问题; 3.面试再加分,巴不得面试官打破沙锅问到底,竞争力MAX。 【课程如何观看?】  1、登录CSDN学院 APP 在我的课程中进行学习; 2、移动端:CSDN 学院APP(注意不是CSDN APP哦)  本课程为录播课,课程永久有效观看时长 【资料开放】 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化。  下载方式:电脑登录课程观看页面,点击右侧课件,可进行课程资料的打包下载。
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值