Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。Canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。canvas是HTML5中的新元素，使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。
在国外问答网站Quora上，许多开发者对于HTML5 Canvas元素的实用性进行了一系列探讨。Canvas非常灵活，能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形。
用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，从而生成动态的图形。
