canvas2游戲(canvas2游戲全CG)

這幾個動漫人物是誰，在哪個動漫里，一定要說動漫名

第一個Galgame《Canvas2～茜色のパレット～ DVD EDITION》等

角色：《鳳仙 艾莉絲》（鳳仙 エリス/ ほうせん えりす）

有動畫《Canvas2 【虹色のスケッチ 】》七彩的素描

第二個Galgame《ホームメイド スイーツ》

角色《三ツ峰 楓》（みつみね かえで）

第三個Galgame《夜明前的琉璃色》（夜明け前より瑠璃色な）

角色：《莉斯莉特。諾艾爾》 有動畫版《夜明前的琉璃色-新月之愛-》

第四個Galgame《夕陽染紅的街道》

角色《長瀨湊》（ながせ みなと） 有動畫

第五個Galgame《竜翼のメロディア -Diva with the blesd dragonol-》

角色《弗洛莉婭·雷基·威斯特里亞（フローリア·レキ·ヴェストリア）》

canvas2-七彩素描游戲下載

不好意思我在迅雷上只找到了動漫和CG的，沒有游戲的格式，
電驢
上面也只有動漫和MP3，呵呵，樓主還是去買碟吧..
其他網站的怕有毒，
不知道有沒有其他人能找到哦，
新年快樂哦！

如何開發一個簡單的HTML5 Canvas 小游戲

創建畫布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

首先我們需要創建一張畫布作為游戲的舞臺。這里通過JS代碼而不是直接在HTML里寫一個<canvas>元素目的是要說明代碼創建也是很方便的。有了畫布后就可以獲得它的上下文來進行繪圖了。然后我們還設置了畫布大小，最后將其添加到頁面上。

準備圖片
// 背景圖片
var bgReady = fal;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

游戲嘛少不了圖片的，所以我們先加載一些圖片先。簡便起見，這里僅創建簡單的圖片對象，而不是專門寫一個類或者Helper來做圖片加載。bgReady這個變量用來標識圖片是否已經加載完成從而可以放心地使用了，因為如果在圖片加載未完成情況下進行繪制是會報錯的。

整個游戲中需要用到的三張圖片：背景，英雄及怪物我們都用上面的方法來處理。

游戲對象
// 游戲對象
var hero = {
speed: 256, // 每秒移動的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;

現在定義一些對象將在后面用到。我們的英雄有一個speed屬性用來控制他每秒移動多少像素。怪物游戲過程中不會移動，所以只有坐標屬性就夠了。monstersCaught則用來存儲怪物被捉住的次數。

處理用戶的輸入
// 處理按鍵
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, fal);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, fal);

現在開始處理用戶的輸入(對初次接觸游戲開發的前端同學來說，這部分開始可能就需要一些腦力了)。在前端開發中，一般是用戶觸發了點擊事件然后才去
執行動畫或發起異步請求之類的，但這里我們希望游戲的邏輯能夠更加緊湊同時又要及時響應輸入。所以我們就把用戶的輸入先保存下來而不是立即響應。

為此，我們用keysDown這個對象來保存用戶按下的鍵值(keyCode)，如果按下的鍵值在這個對象里，那么我們就做相應處理。

開始一輪游戲
// 當用戶抓住一只怪物后開始新一輪游戲
var ret = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// 將新的怪物隨機放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};

ret方法用于開始新一輪和游戲，在這個方法里我們將英雄放回畫布中心同時將怪物放到一個隨機的地方。

更新對象
// 更新游戲對象的屬性
var update = function (modifier) {
if (38 in keysDown) { // 用戶按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用戶按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用戶按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用戶按的是→
hero.x += hero.speed * modifier;
}

// 英雄與怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
ret();
}
};

這就是游戲中用于更新畫面的update函數，會被規律地重復調用。首先它負責檢查用戶當前按住的是中方向鍵，然后將英雄往相應方向移動。

有點費腦力的或許是這個傳入的modifier 變量。你可以在main
方法里看到它的來源，但這里還是有必要詳細解釋一下。它是基于1開始且隨時間變化的一個因子。例如1秒過去了，它的值就是1，英雄的速度將會乘以1，也就
是每秒移動256像素；如果半秒鐘則它的值為0.5，英雄的速度就乘以0.5也就是說這半秒內英雄以正常速度一半的速度移動。理論上說因為這個update 方法被調用的非?？烨翌l繁，所以modifier的值會很小，但有了這一因子后，不管我們的代碼跑得快慢，都能夠保證英雄的移動速度是恒定的。

現在英雄的移動已經是基于用戶的輸入了，接下來該檢查移動過程中所觸發的事件了，也就是英雄與怪物相遇。這就是本游戲的勝利點，monstersCaught +1然后重新開始新一輪。

渲染物體
// 畫出所有物體
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}

if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}

if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}

// 計分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

之前的工作都是枯燥的，直到你把所有東西畫出來之后。首先當然是把背景圖畫出來。然后如法炮制將英雄和怪物也畫出來。這個過程中的順序是有講究的，因為后畫的物體會覆蓋之前的物體。

這之后我們改變了一下Canvas的繪圖上下文的樣式并調用fillText來繪制文字，也就是記分板那一部分。本游戲沒有其他復雜的動畫效果和打斗場面，繪制部分大功告成！

主循環函數
// 游戲主函數
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

// 立即調用主函數
requestAnimationFrame(main);
};

上面的主函數控制了整個游戲的流程。先是拿到當前的時間用來計算時間差（距離上次主函數被調用時過了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒數)再傳入update函數。最后調用render 函數并且將本次的時間保存下來。

關于游戲中循環更新畫面的討論可參見「Onslaught! Arena Ca Study」。

關于循環的進一步解釋
// requestAnimationFrame 的瀏覽器兼容性處理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

如果你不是完全理解上面的代碼也沒關系，我只是覺得拿出來解釋一下總是極好的

為了循環地調用main函數，本游戲之前用的是tInterval。但現今已經有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考慮瀏覽器兼容性。上面的墊片就是出于這樣的考慮，它是Paul Irish 博客原版的一個簡化版本。

啟動游戲！

canvas簡介以及常用性能優化

HTML5 的 Canvas 元素使用 JavaScript 在網頁上繪制圖像。
畫布是一個矩形區域，您可以控制其每一像素。
Canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
Canvas 是逐像素進行渲染的。
在 Canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。

SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。

- 依賴分辨率
- 不支持事件處理器
-弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪

-不依賴分辨率
- 支持事件處理器
-最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合游戲應用

當我們在繪制的一個元素（文字、圖形）的時候，首先要對這個元素規定它的顏色，文字字體，然后在進行繪制，不然不會生效。

場景 ：假設您有一個游戲，其UI位于頂部，中間是游戲性動作，底部是靜態背景。

方法 ：可以將游戲分成三個<canvas>層。 UI將僅在用戶輸入時發生變化，游戲層隨每個新框架發生變化，并且背景通常保持不變

好處 ：避免了固定組件的重復渲染。

設備屏幕上的像素（邏輯像素），我們可以當做是正常的像素（css中設置的像素），你可以正常使用它。如果你畫一個100px的東西，他也就是一個100px的東西。但是，在出現了一些高分辨率屏幕的手機之后，一個屬性devicePixelRatio就一起出現了。它允許我們去查詢設備像素比。在這里我們需要拋出一個名詞邏輯像素，也就是在css設置的100px時，在iphone6/7/8(devicePixelRatio為3)上，實際渲染的是300px的物理像素。比例為3：1

但是這對于我們開發者的影響是什么呢？早些時候，我們注意到當我們向這種高分辨率的屏幕添加img的時候，我們的圖形受到devicePixelRatio的影響變得非常模糊。
如何解決這個問題呢？如果我把img的寬和高分別與devicePixelRatio相乘，得到的大小畫進屏幕中，在對齊進行縮放devicePixelRatio的大小。Img就會以一種高清的方式呈現。

但是此方法有個問題就是既然同比將畫布和內容進行了放大，然后在進行縮放，那么繪制出來的圖片大小就會相應的增大。建議根據需求來判斷是否需要進行高清操作。

canvas動畫的本質是不斷地擦除和重繪，再結合一些時間控制的方法達到動畫的目的
顯示器刷新頻率是60Hz，最平滑動畫的最佳循環間隔是1000ms/60，約等于16.6ms
而 requestAnimationFrame 就是根據顯示器刷新頻率來的，這是瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優化方法的調用，節省系統資源，提高系統性能，如果頁面不是激活狀態下的話， requestAnimationFrame() 會被暫停調用以提升性能和電池壽命。

執行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，返回一個 requestID，該回調會在瀏覽器下一次重繪之前執行

取消一個先前通過調用window. cancelAnimationFrame()方法添加到計劃中的動畫幀請求，接受一個 requestID
瀏覽器兼容

canvas每條線都有一條無限細的中線，線由中線兩個伸展。

解決問題的根源起點應該在0.5的地方，這也是為什么x,y需要+0.5。當x,y做過計算不一定是整數的時候可能+0.5又出現模糊的情況。所以做一個取整可以保證不會出現模糊的情況

由于我們具備「把圖片中的某一部分繪制到 Canvas 上」的能力。
在平常的html中，我們會把多個對象放在一張圖片里面，以減少請求數量。這通常被稱為「精靈圖」。然而，這實際上存在著一些潛在的性能問題。 使用 drawImage 繪制同樣大小的區域，數據源是一張和繪制區域尺寸相仿的圖片的情形 ，和比起 數據源是一張較大圖片（我們只是把數據扣下來了而已）的情形 ，前者的開銷要小一些?？梢哉J為，兩者相差的開銷正是「裁剪」這一個操作的開銷。
雖然看上去開銷相差并不多，但是 drawImage 是最常用的 API 之一，我認為還是有必要進行優化的。優化的思路是，將「裁剪」這一步驟事先做好，保存起來，每一幀中僅繪制不裁剪。

我們可以先把待繪制的區域裁剪好，保存起來，這樣每次繪制時就能輕松很多
drawImage 方法的第一個參數不僅可以接收 Image 對象，也可以接收另一個 Canvas 對象。而且，使用 Canvas 對象繪制的開銷與使用 Image 對象的開銷幾乎完全一致。我們只需要實現將對象繪制在一個未插入頁面的 Canvas 中，然后每一幀使用這個 Canvas 來繪制。

canvas怎么一直播放

手動設置。“Canvas中文名稱叫“畫布”，它是游戲中所有UI組件的“容器”。canvas一直播放需要手動設置，具體步驟如下所示：
1、首先點擊軟件Canvas。
2、其次在軟件Canvas內找到播放設置。
3、最后設置成以一直播放即可。