整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
又在別的地方嫖到了這個效果研究了億下下，制作過程如下（超詳細(xì)）：
<canvas id="canvas"></canvas>
#canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 10px rgb(150, 150, 150);
}
position: absolute; 絕對定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 陰影。
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
//畫布寬
var wide=600;
//畫布高
var high=600;
// 變量，判斷一次渲染中只識別按鍵一次
var kd = 0;
//當(dāng)前分?jǐn)?shù)
var fraction =0;
//速度，就是執(zhí)行定時器的時間參數(shù)
var speed = 250;
// 蛇的初始顏色 紅色
var yanse = `red`;
// 蛇數(shù)組，組成蛇的每一個方塊
var snake = [];
// 食物數(shù)組
var food = {};
// 蛇的移動方向，x軸：1為向右，-1為向左；y軸：1為向下，-1為向上 。不能斜著走，所以0為某軸無方向。
var diretion = {
x:-1,
y:0
}
// 給畫布寬高賦值 打算畫一個長寬都是30個20px的方塊畫布
canvas.width = wide;
canvas.height = high;
function chushi(){
//蛇初始長度為3個方塊，位置如下（這個隨意）
for(let i =0;i<3;i++){
snake.push({
x: i+10,
y: 10
})
}
// 給食物一個隨機位置和隨機顏色
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
}
// 繪制圖形
function draw(){
// 繪制顯示當(dāng)前分?jǐn)?shù)的文字
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font="50px 仿宋";
ctx.textAlign = 'center';
ctx.fillText("你的分?jǐn)?shù)為："+fraction+" 分",300,300);
// 繪制方格，長寬都是30個，都是19px*19px的方格
for(let i=0;i<30;i++){
for(let j=0;j<30;j++){
ctx.fillStyle = 'rgba(255, 255, 255,.3)';
ctx.fillRect(i*20,j*20,19,19);
}
}
// 繪制蛇
for(let i=0;i<snake.length;i++){
temp = snake[i];
ctx.fillStyle = yanse;
ctx.fillRect(temp.x*20,temp.y*20,19,19);
// 判斷蛇頭（第一個方塊）是否與身體某個方塊重合 ，就是頭撞到身體
if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
// 游戲結(jié)束，重新給初始化
alert('游戲結(jié)束~點擊確認(rèn)再來一次~');
fraction = 0;
snake.length=0;
chushi();
}
}
// 繪制食物，繪制一個圓形
ctx.beginPath();
ctx.fillStyle = food.color;
ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
// 給蛇頭繪制一個字符，☆ ，好區(qū)分頭尾 ，也可省略
ctx.fillStyle = 'yellow';
ctx.font="15px 仿宋";
ctx.textAlign = "start";
ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
}
//更新
function update(){
// 建一個對象head，這個為蛇的新頭，通過繪制新頭，去掉尾部實現(xiàn)移動效果
var head = {};
//判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 x軸
switch (snake[0].x+diretion.x){
case -1: head.x=29;break;
case 30: head.x=0;break;
// 沒到邊界則為當(dāng)前位置加方向
default: head.x = snake[0].x+diretion.x;
}
//判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 y軸
switch (snake[0].y+diretion.y){
case -1: head.y=29;break;
case 30: head.y=0;break;
// 沒到邊界則為當(dāng)前位置加方向
default: head.y = snake[0].y+diretion.y;
}
// 判斷新蛇頭是否與食物重合，就是吃到食物
if(head.x==food.x&&head.y==food.y){
//蛇的顏色為吃到食物的顏色
yanse = food.color;
// 重新給食物初始化
food = {
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
//在蛇尾添加一節(jié)
let temp = snake[length-1];
snake.push(temp);
fraction+=1;
// 吃完食物速度加快
if(speed>80){
//定時器間隔減10
speed = speed-10;
// 清除原來定時器，重新繪制
clearInterval(time);
time = setInterval(function () {
kd = 0;
ctx.clearRect(0, 0, wide, high);
update();
draw();
}, speed);
}
}
//添加新頭
snake.splice(0,0,head);
//去掉尾部
snake.pop();
}
//判斷點擊事件
document.addEventListener('keydown', event=>{
switch (event.keyCode){
// 按了向上鍵
case 38:
// 判斷當(dāng)前不是向下移動與還沒按過鍵，否則蛇會重疊
if(diretion.y!=1&&kd==0){
// 重新給移動方向賦值
diretion.x=0;
diretion.y=-1;
kd=1;
}
break;
// 下面以此類推一樣的原理
case 39:
if(diretion.x!=-1&&kd==0){
diretion.x=1;
diretion.y=0;
kd=1;
}
break;
case 40:
if(diretion.y!=-1&&kd==0){
diretion.x=0;
diretion.y=1;
kd=1;
}
break;
case 37:
if(diretion.x!=1&&kd==0){
diretion.x=-1;
diretion.y=0;
kd=1;
}
break;
}
})
chushi();
var time = setInterval(function(){
kd=0;
ctx.clearRect(0,0,wide,high);
update();
draw();
},speed);
歡的可以收藏轉(zhuǎn)發(fā)加關(guān)注
HTML5經(jīng)歷了前期HTML快速的更新?lián)Q代，以其獨有特性的優(yōu)勢迅速占據(jù)了網(wǎng)頁開發(fā)市場鰲頭。介于目前學(xué)習(xí)和想要從事HTML5網(wǎng)頁開發(fā)的人越來越多。本次，給大家整理了一下基本的HTML5學(xué)習(xí)路線圖，適應(yīng)于一些零基礎(chǔ)學(xué)習(xí)HTML5的同學(xué)借鑒。
如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入web前端學(xué)習(xí)交流秋秋圈：767273102 里面可以與大神一起交流并走出迷茫。新手可免費領(lǐng)取學(xué)習(xí)資料，看看前輩們是如何在編程的世界里傲然前行不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻），有想學(xué)習(xí)web前端的，或是轉(zhuǎn)行，或是大學(xué)生，還有工作中想提升自己能力的，正在學(xué)習(xí)的小伙伴歡迎加入
HTML5學(xué)習(xí)路線規(guī)劃：
一、HTML5基礎(chǔ)
HTML 快速入門、文本、圖像、鏈接、表格、列表、表單、框架;
二、CSS3基礎(chǔ)
CSS基礎(chǔ)語法、各種選擇器(通用選擇器、元素選擇器、id和class選擇器、后代選擇器、偽類選擇器等)、框模型與背景、文本格式化、表格、顯示與定位、瀏覽器調(diào)試
三、HTML5高級
HTML5 增強表單元素、HTML5驗證、HTML5新事件和新屬性、Canvas繪圖、HTML5 SVG、音頻和視頻處理、離線Web存儲與應(yīng)用、HTML5 拖放、Web Socket API、Geolocation API、Web Worker API
四、實戰(zhàn)技能目標(biāo)
掌握J(rèn)Query核心API，HTML5 中的繪圖、音頻視頻處理、表單新特性，輕量級WEBAPP開發(fā)。
HTML5開發(fā)從根本上改變了開發(fā)者開發(fā)web和應(yīng)用的方式，從桌面瀏覽器到移動應(yīng)用，HTML5都已經(jīng)成為前端開發(fā)必不可少的語言。特別是移動互聯(lián)網(wǎng)的爆發(fā)和微信這個超級應(yīng)用對HTML5的支持，掌握HTML5語言的程序員已然成為各個互聯(lián)網(wǎng)公司的標(biāo)配，薪資也是一路走高。
如果你想入門HTML5，又苦于沒有好的學(xué)習(xí)方法，可以選擇一套優(yōu)秀的教程來進(jìn)行學(xué)習(xí)，讓自己少走彎路快速進(jìn)入HTML5開發(fā)的行列。
學(xué)習(xí)前端的伙伴可以私信回復(fù)小編“前端”領(lǐng)取全套免費前端學(xué)習(xí)資料和學(xué)習(xí)視頻
天小編將分享前端開發(fā)中必學(xué)的知識點，HTML5中關(guān)于Canvas(畫布)的知識點；
Canvas，是HTML5中所有新特性目前應(yīng)用最廣泛的一個標(biāo)簽，替代引入的圖片(圖形)，用途非常廣泛如（因此這個標(biāo)簽相當(dāng)重要）：
1.完成HTML頁面中的圖形繪制
2.實現(xiàn)網(wǎng)絡(luò)游戲或單機游戲(網(wǎng)頁游戲)
3.在HTML頁面中繪制圖表
4.餅狀圖
5.柱狀圖
6.折線圖
7.網(wǎng)頁游戲
...
Canvas的發(fā)展方向，目前主流的游戲開發(fā)引擎之一，如：白鷺引擎 - HTML5、Cocos-JS - HTML5、掌握物理系統(tǒng)、掌握精靈系統(tǒng)(地圖)、HTML5網(wǎng)頁游戲。
需要特別注意的是：Canvas作為HTML頁面的元素出現(xiàn)、在Canvas繪制的圖形與HTML頁面是無關(guān)的、利用DOM定位繪制的圖形、元素的事件不能綁定繪制的圖形
HTML頁面部分：定義<canvas>元素、建議使用width和height屬性設(shè)置<canvas>元素的寬度和高度
JavaScript部分：獲取HTML頁面中的<canvas>元素、通過getContext()方法創(chuàng)建畫布對象、該方法接收一個參數(shù) - 創(chuàng)建二維或三維圖形
需要特別注意的是：該參數(shù)為字符串類型、"2d"或"3d"中的"d"必須小寫、目前幾乎都是"2d"效果、使用Canvas提供的API完成需求。
fillRect(x,y,width,height) - 繪制實心矩形
x和y - 表示繪制矩形的左上角的坐標(biāo)值(x,y)
width - 表示繪制矩形的寬度
height - 表示繪制矩形的高度
strokeRect(x,y,width,height) - 繪制空心矩形
x和y - 表示繪制矩形的左上角的坐標(biāo)值(x,y)
width - 表示繪制矩形的寬度
height - 表示繪制矩形的高度
clearRect(x,y,width,height) - 清除指定區(qū)域的矩形
x和y - 表示繪制矩形的左上角的坐標(biāo)值(x,y)
width - 表示繪制矩形的寬度
height - 表示繪制矩形的高度
設(shè)置樣式
fillStyle - 設(shè)置填充樣式
strokeStyle - 設(shè)置描邊樣式
globalAlpha - 設(shè)置透明度(0-10-100-10-1000-10-1000000-10-10000-10-10000-10-10000-10-10000-10-1000-10-100000-100-100-1)
需要特別注意的是：先設(shè)置樣式,再繪制圖形，每改變一次樣式,都需要重新設(shè)置樣式，填充樣式與描邊樣式互不干擾
createLinearGradient(x1,y1,x2,y2)
線性漸變具有一個基準(zhǔn)線
射線(扇形)漸變
createRadialGradient(x1,y1,r1,x2,y2,r2)
射線漸變具有兩個基準(zhǔn)圓
設(shè)置漸變顏色
addColorStop(position,color)方法
color - 顏色
實現(xiàn)步驟如下：
1.設(shè)置線性漸變或扇形漸變
2.返回漸變對象
3.漸變對象設(shè)置漸變的顏色
4.設(shè)置填充或描邊樣式為漸變
設(shè)置屬性：font - 用法與CSS中的font一致
對齊方式：
textAlign - 水平對齊
left - 基準(zhǔn)線在文字的左邊
center - 基準(zhǔn)線在文字的中間
right - 基準(zhǔn)線在文字的右邊
textBaseline - 垂直對齊
top - 基準(zhǔn)線在文字的上邊
middle - 基準(zhǔn)線在文字的中間
bottom - 基準(zhǔn)線在文字的下邊
hanging - 懸掛基線
alphabetic - 字母基線
繪制方法
fillText(text,x,y) - 繪制實心文字
text - 設(shè)置繪制的文字內(nèi)容
x和y - 設(shè)置繪制文字的坐標(biāo)值
strokeText(text,x,y) - 繪制空心文字
text - 設(shè)置繪制的文字內(nèi)容
x和y - 設(shè)置繪制文字的坐標(biāo)值
設(shè)置陰影
shadowColor - 設(shè)置陰影顏色
shadowOffsetX - 設(shè)置陰影水平位置
正值 - 陰影向右移動、0 - 陰影不移動、負(fù)值 - 陰影向左移動
shadowOffsetY - 設(shè)置陰影垂直位置
正值 - 陰影向下移動、0 - 陰影不移動、負(fù)值 - 陰影向上移動
shadowBlur - 設(shè)置陰影的程度
值的類型為Number、值越大,陰影效果越明顯
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
