canvas刮刮卡遊戲開發
先看效果:
一.基礎知識-畫布元素的使用
1 繪製線條
-
思路
- 在頁面中添加畫布元素
- 獲取畫布元素的上下文環境對象
- 使用上下文環境對象繪製圖形，保存在內存中
- 繪製一個線條
//設置畫布的起始點 context.moveTo(x,y); //從當前位置繪製直線到x,y座標 context.lineTo(x,y);案例和效果:
2. 繪製不同線條顏色的三角形
-
繪製三角形
繪製一個簡單的三角形
-
繪製的顏色與線條寬度
//設置筆觸圖形的顏色 context.strokeStyle=color ------------------------- //設置線條的寬度，以像素爲單位 context.lineWidth=number -
重置路徑
-
//開始一條路徑，或重置當前的路徑,並切斷和上一個圖形的路徑聯繫 context.beginPath() -
重置路徑的優勢
可以實現不同大小和顏色圖形的單獨繪製。
-
案例和效果:
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="cvs" style="border: solid 1px #ccc"></canvas>
<script type="text/javascript">
//獲取畫布元素
var cvs=document.getElementById("cvs");
//獲取工具集
var cxt=cvs.getContext("2d");
//設置繪製圖形的線條寬度
cxt.lineWidth=5;
//設置繪製圖形的顏色
cxt.strokeStyle='red';
//定位一個起始點
cxt.moveTo(50,50);
//繪製第二個點
cxt.lineTo(150,50)
//繪製線條
cxt.stroke()
//重置當前路徑
cxt.beginPath();
//設置繪製圖形的顏色
cxt.strokeStyle='blue';
//設置繪製第二條線起始點
cxt.moveTo(150,50);
//繪製第二個點
cxt.lineTo(80,100)
//繪製線條
cxt.stroke()
//重置當前路徑
cxt.beginPath();
//設置繪製圖形的顏色
cxt.strokeStyle='green';
//設置繪製第二條線起始點
cxt.moveTo(80,100);
//返回原始點
cxt.lineTo(50,50)
//繪製線條
cxt.stroke()
</script>
</body>
</html>
效果:
二.基礎知識-其他繪製API
1. 文字繪製API
-
指定位置
//在指定位置和寬度內繪製文字 context.fillText(text,x,y,maxWidth); //最大寬度 -
設置字體名稱和樣式
//設置字體名稱和形狀 context.font='字體屬性' //bold 32px sans-serif -
設置字體對齊位置
//設置文本內容水平對齊方式 context.textAlign='水平方位值' //center|left|right //設置文本內容垂直對齊方式 context.textBaseline='垂直方位值' //top|middle|bottom -
繪製內容另存爲圖片
//當前繪製內容存爲圖片 context.toDataURL(type, encoderOptions);//image/png圖片格式,0到1區間圖片質量 -
案例和效果:
-
普通文字
帶有對齊方式和另存爲圖片
2. 繪製矩形和圓形及圖片
-
繪製矩形
//繪製矩形的路徑 context.rect(x,y,width,height); //繪製無填充的矩形 context.strokeRect(x,y,width,height); //繪製填充的矩形 context.fillRect(x,y,width,height); //清空指定矩形內像素 context.clearRect(x,y,width,height);案例和效果:
-
繪製有弧度的圓形
//在指定位置繪製一個圓形 context.arc(x,y,r,sAngle,eAngle,clockwise); -
繪製不同大小的圖片
//在畫布上繪製固定座標的圖像 context.drawImage(img,x,y); //在畫布上繪製不僅固定座標，且規定圖像的寬度和高度圖像 context.drawImage(img,x,y,width,height); //在畫布上剪切圖像，並在畫布上繪製被剪切的部分 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);案例和效果:
三.開始刮刮卡遊戲開發: 實現刮刮卡效果
思路步驟:
1.將隨機的中獎信息繪製到畫布中;
2.使用灰色的矩形覆蓋中獎信息;
3.使用鼠標滑擦區域實現刮刮效果;
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas style="border:solid 1px #ccc" id="cas"></canvas>
</body>
</html>
<script type="text/javascript">
/* 思路步驟:
1.將隨機的中獎信息繪製到畫布中;
2.使用灰色的矩形覆蓋中獎信息;
3.使用鼠標滑擦區域實現刮刮效果;
*/
var cas = document.getElementById("cas"); //獲取畫布元素
var cxt = cas.getContext('2d') //獲取畫布工具集
console.log(cxt);
//步驟1開始
var arr = ["特等獎", "一等獎", "二等獎", "三等獎", "謝謝參與"]
// 隨機生成文字
var randomText = arr[Math.floor(Math.random() * arr.length)];
// console.log(randomText);
cxt.font = "bold 30px 黑體";
cxt.textAlign = "center";
cxt.textBaseline = 'middle';
cxt.fillStyle = "red"
cxt.fillText(randomText, cas.width / 2, cas.height / 2);
// 將繪製的文字畫布生成圖片,做爲畫布的背景圖
var bgm = cas.toDataURL('image/png', 1); //記得用cas
cas.style.background = "url(" + bgm + ")";
//步驟1完成
//步驟2開始
cxt.fillStyle = "#ddd";
cxt.fillRect(0, 0, cas.width, cas.height);
//步驟2完成
//步驟3開始
var flag = false
cas.addEventListener("mousedown", () => {
flag = true;
cxt.globalCompositeOperation="destination-out";//很重要,設置這個屬性,實現繪畫的區域與背景透明
})
cas.addEventListener("mousemove", (e) => {
if (flag) {
var x = e.clientX;
var y = e.clientY;
cxt.fillStyle = "red";
cxt.fillRect(x, y, 30, 30)
}
})
cas.addEventListener("mouseup", () => {
console.log("onmouseup");
flag = false;
})
//步驟3完成
</script>