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

用Canvas画一个刮刮乐的更多相关文章

  1. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  3. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  4. 用canvas画一个的小画板(PC端移动端都能用)

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  5. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. 手对手的教你用canvas画一个简单的海报

    啦啦啦,首先说下需求,产品想让用户在我们app内,分享一张图片到微信.qq等平台.图片中包含用户的姓名.头像.和带着自己信息的二维码.然后,如何生成这张海报呢~~~首先我们老大告诉我有一个插件叫htm ...

  7. 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  8. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 使用canvas画一个雷达效果图的特效代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. JSP与Servlet的介绍说明

    什么是Servlet和JSP 用Java开发Web应用程序时用到的技术主要有两种,即Servlet和JSP. Servlet是在服务器端执行的Java程序,一个被称为Servlet容器的程序(其实就是 ...

  2. Jpa 的Persistence.xml配置讲解

    <?xml version="1.0"?> <persistence xmlns="http://java.sun.com/xml/ns/persist ...

  3. 在线java反编译服务

    大家是否遇到过有java class文件,却没有java源码的苦恼.近期findmaven.net提供了在线java反编译服务http://www.findmaven.net/decompile_cn ...

  4. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  5. WinXP局域网共享设置

    关闭局域网共享 1.不允许SAM帐户和共享的匿名枚举(系统默认是允许的). 组策略-计算机配置-Windows 设置-安全设置-本地安全策略-安全选项-网络访问:不允许SAM帐户和共享的匿名枚举. 设 ...

  6. 【AtCoder Beginner Contest 074 A】Bichrome Cells

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...

  7. [Angular] FadeIn and FadeOut animation in Angular

    To define an Angular Animation, we using DSL type of language. Means we are going to define few anim ...

  8. Swift语言之View,Button控件实现小方块在界面上的移动(纯代码实现)

    import UIKit class ViewController: UIViewController { var diamonds:UIView! var diamondsXY = CGRectMa ...

  9. C_C++指针指针应用详解

    前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其 ...

  10. 如何在Win8/Win10上开启 dotNetFramework 2.0/3.5 功能

    问题: 在Windows 8.Windows 10上安装一些软件时,系统可能会报出如下错误:你的电脑上的应用需要使用以下Windows功能:     解决方式:   首先呢,你需要准备好一个Win8/ ...