用Canvas画一个刮刮乐

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,从而生成动态的图形。

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880 福利二:微信小程序入门与实战全套详细视频教程

image

自荐前端干货:

进阶攻略|前端最全的框架总结:https://www.jianshu.com/p/2a8ce7075d79 web开发快速提高工作效率的一些资源:https://www.jianshu.com/p/3cede64e87e5 前端学习的几个网站:https://www.jianshu.com/p/c36463dd56db 老司机程序员用到的各种网站整理:https://www.jianshu.com/p/c806eabe5bec 进阶攻略|前端完整的学习路线:https://www.jianshu.com/p/ed50ee3889d4 八款前端开发人员更轻松的实用在线工具:https://www.jianshu.com/p/267a01fb8bdb 前端几个常用简单的开发手册拿走不谢:https://www.jianshu.com/p/fd9689046a9b 程序员常用的六大技术博客类:https://www.jianshu.com/p/d1614f890282 九款优秀的企业项目协作工具推荐:https://www.jianshu.com/p/7df25e438610 移动端手势的七个事件库:https://www.jianshu.com/p/0754d5daa27e Bootstrap相关优质项目学习清单:https://www.jianshu.com/p/80d229e7fedc 2018前端越来越流行的的技术:https://www.jianshu.com/p/d4af2aa96cee

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

1704
来自专栏web

慕课网javascript 进阶篇 第十章 编程练习

1231
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

3896
来自专栏袁佳平的专栏

周杰伦读心术背后的技术实现

前言   在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <m...

6798
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

1873
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

48110
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

2696
来自专栏前端说吧

css3-巧用选择器 “:target”

3656
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

1904
来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

4658

扫码关注云+社区

领取腾讯云代金券