基本用法
<canvas id="tutorial" width="300" height="150"></canvas>
渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas,getContext('2d');
globalCompositeOperation 全局的組合操作
ctx.globalCompositeOperation = 'destination-over';
基本繪圖的步驟
實(shí)現(xiàn)代碼
var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
sun.src = 'Canvas_sun.png';
moon.src = 'Canvas_moon.png';
earth.src = 'Canvas_earth.png';
window.requestAnimationFrame(draw);
}
function draw(){
}
init();
討論
canvas引擎
目前市面上有哪些比較有名的基于canvas的引擎扎酷，他們各有什么特點(diǎn)椅野，合適做什么應(yīng)用菱皆？
Laro：是一個(gè)基于html5 canvas的用于平面2d或者2.5d游戲制作的輕量級(jí)游戲引擎。
特點(diǎn)：快速灶壶、輕量
應(yīng)用：?輕量級(jí)游戲
X-Canvas：是一款跨平臺(tái)的HTML5游戲引擎絮宁。
特點(diǎn)：一次開(kāi)發(fā)驳遵，跨平臺(tái)運(yùn)行
應(yīng)用：手機(jī)游戲開(kāi)發(fā)
CutJS：一款專門用于跨平臺(tái)游戲開(kāi)發(fā)的開(kāi)源2D HTML5渲染引擎
特點(diǎn)：輕量級(jí)境蔼、快速厅贪、可交互
應(yīng)用：跨平臺(tái)的游戲開(kāi)發(fā)
cocos2djs:一個(gè)游戲框架蠢护。國(guó)人開(kāi)發(fā)。
特點(diǎn):從cocos2d-x轉(zhuǎn)過(guò)來(lái)的养涮。各種api廣泛葵硕。
應(yīng)用：游戲開(kāi)發(fā)
用canvas畫一個(gè)圓
在一個(gè)300*300的canvas（id為“myCanvas“）上，以坐標(biāo)點(diǎn)（150, 150）為圓心贯吓，100為半徑懈凹，畫一個(gè)邊框色為#4d4e53，填充色為#6a83ff的圓悄谐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 畫圓</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
cxt.beginPath();
//繪制圓介评，參數(shù)為：x坐標(biāo)，y坐標(biāo)爬舰，半徑们陆，起始角度，結(jié)束角度情屹，是否沿逆時(shí)針?lè)较颉? cxt.arc(150, 150, 100, 0, Math.PI*2,true);
//設(shè)置邊框色
cxt.strokeStyle = "#4d4e53";
//設(shè)置填充色
cxt.fillStyle = "#6a83ff";
//繪制輪廓
cxt.stroke();
//填充
cxt.fill();
//關(guān)閉繪制路徑
cxt.closePath();
</script>
</body>
</html>
