基本用法

渲染上下文

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的圆。

Mozilla官方教程