Canvas 通過 JavaScript 來繪制 2D圖形拯辙。Canvas 是逐像素進(jìn)行渲染的脊串。開發(fā)者可以通過javascript腳本實(shí)現(xiàn)任意繪圖窜醉。Canvas元素是HTML5的一部分拌汇，允許腳本語言動態(tài)渲染位圖像。canvas是HTML5中的新元素谱净，使用javascript用它來繪制圖形窑邦、圖標(biāo)壕探、以及其它任何視覺性圖像冈钦。
在國外問答網(wǎng)站Quora上，許多開發(fā)者對于HTML5 Canvas元素的實(shí)用性進(jìn)行了一系列探討李请。Canvas非常靈活瞧筛，能夠很好地融合JavaScript代碼并在瀏覽器內(nèi)繪制華麗的圖形。
學(xué)習(xí)網(wǎng)址和資料：
菜鳥教程：http://www.runoob.com/html/html5-canvas.html
http://www.w3school.com.cn/tags/tag_canvas.asp
用Canvas畫一個(gè)刮刮樂步驟：
一：創(chuàng)建一個(gè)畫布（Canvas）
注意: 標(biāo)簽通常需要指定一個(gè)id屬性 (腳本中經(jīng)常引用), width 和 height 屬性定義的畫布的大小.
<canvas>簡單實(shí)例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
二：使用 JavaScript 來繪制圖像
canvas 元素本身是沒有繪圖能力的捻艳。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
var isdown = false,
cover = document.getElementById("cover"),//首先驾窟，找到 <canvas> 元素:
covercanvas = cover.getContext("2d");//然后，創(chuàng)建 context 對象：
三：繪制矩形
//設(shè)置fillStyle屬性可以是CSS顏色认轨，漸變绅络，或圖案。fillStyle 默認(rèn)設(shè)置是#000000（黑色）嘁字。
//canvas 是一個(gè)二維網(wǎng)格恩急。canvas 的左上角坐標(biāo)為 (0,0)，上面的 fillRect 方法擁有參數(shù) (0,0,400,200)纪蜒。意思是：在畫布上繪制 400x200 的矩形衷恭，從左上角開始 (0,0)。
covercanvas.fillStyle="transparent";
covercanvas.fillRect(0,0,400,200);
四：移動端阻止瀏覽器默認(rèn)功能
由于是長按事件纯续，要在移動端阻止瀏覽器默認(rèn)功能随珠。
function isDown(e){
e.preventDefault();
isdown=true;
}
function isUp(e){
isdown=false;
}
..........
五：鼠標(biāo)事件
需要改變的內(nèi)容為_width，_height,touchTop,touchLeft這幾個(gè)參數(shù)猬错，根據(jù)自身畫布的位置自行計(jì)算即可窗看。
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);
}
實(shí)際例子（完整代碼）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用Canvas畫一個(gè)刮刮樂</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>
<!-- 創(chuàng)建一個(gè)畫布（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"); //然后倦炒，創(chuàng)建 context 對象：
//下面的兩行代碼繪制一個(gè)灰色的矩形：
//設(shè)置fillStyle屬性可以是CSS顏色显沈，漸變，或圖案逢唤。fillStyle 默認(rèn)設(shè)置是#000000（黑色）拉讯。
covercanvas.fillStyle = "transparent";
covercanvas.fillRect(0, 0, 400, 200);
//canvas 是一個(gè)二維網(wǎng)格。
//canvas 的左上角坐標(biāo)為 (0,0)
//上面的 fillRect 方法擁有參數(shù) (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由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度著恩。JavaScript代碼可以訪問該地區(qū)院尔，通過一套完整的繪圖功能類似于其他通用二維的API纹烹，從而生成動態(tài)的圖形。
