基本用法
<canvas id="tutorial" width="300" height="150"></canvas>
渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas,getContext('2d');
globalCompositeOperation 全局的组合操作
ctx.globalCompositeOperation = 'destination-over';
基本绘图的步骤
实现代码
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的引擎，他们各有什么特点，合适做什么应用？
Laro：是一个基于html5 canvas的用于平面2d或者2.5d游戏制作的轻量级游戏引擎。
特点：快速、轻量
应用：�轻量级游戏
X-Canvas：是一款跨平台的HTML5游戏引擎。
特点：一次开发，跨平台运行
应用：手机游戏开发
CutJS：一款专门用于跨平台游戏开发的开源2D HTML5渲染引擎
特点：轻量级、快速、可交互
应用：跨平台的游戏开发
cocos2djs:一个游戏框架。国人开发。
特点:从cocos2d-x转过来的。各种api广泛。
应用：游戏开发
用canvas画一个圆
在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#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();
//绘制圆，参数为：x坐标，y坐标，半径，起始角度，结束角度，是否沿逆时针方向。
cxt.arc(150, 150, 100, 0, Math.PI*2,true);
//设置边框色
cxt.strokeStyle = "#4d4e53";
//设置填充色
cxt.fillStyle = "#6a83ff";
//绘制轮廓
cxt.stroke();
//填充
cxt.fill();
//关闭绘制路径
cxt.closePath();
</script>
</body>
</html>
网友评论