基本用法
<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>
网友评论