在HTML5规范中的canvas元素，可以让你使用JavaScript来绘制任何图形。

这是毫不夸张地说，在一个数字“canvas”上，您可以使用它快速渲染游戏图像，图形，动画，和其他视觉图像。这基本上消除了对其他类型的在线动画和图形渲染（如Flash），并且是跨平台和设备更兼容。
学习 canvas

If you’re completely new to canvas, you might want to start out with one of these handy guides. There are hundreds of tutorials and guides out there, but these three provide virtually everything a beginner would want to know about canvas before getting started.

Dive Into HTML5

has a fantastic chapter on working with canvas that includes a basic definition, and information on building simple shapes, canvas coordinates, paths, text, and more.

Mozilla Developer Network

The has a very thorough guide to canvas that includes the basics, drawing shapes, using images, applying styles and colors, transformations, compositing, and more.

HTML5 Canvas Tutorials

has exactly what the title suggests: tons of tutorials for using canvas that cover everything from paths and curves to images, text, and more.

 

工具,框架和库

Canvas can be used for a whole host of different purposes, but apps and games are the most common. Games, in particular, are a hugely popular use of canvas, with tons of game engines available.

Regardless of what you want to do with canvas, the tools and other resources below will help get you started.

Animatron

is a premium tool for creating HTML5 animations with no coding required. It has a streamlined UI, supports self-hosted projects (so you can download the HTML5, JavaScript, and resource files for total control), has real-time collaboration tools, and supports both public and private projects.

The free plan supports up to 20 public projects, while paid plans give you more projects and other features, starting at just $6/month.

Mixeek

is an animation tool that’s based purely on CSS3, HTML5, and JavaScript. It has an online design tool that’s easy to use and very intuitive. And the animations it creates are supported on IE, Firefox, Chrome, Opera, and Safari, as well as mobile browsers.

Mixeek is entirely free to use.

Radi

lets you create video, animation, and realtime graphics without learning to code. It works with both the canvas and video tags, and supports many kinds of content layers including images, movies, shapes, text, and more. And of course it supports interactive elements. You can download the Radi beta for free.

PlayCanvas

is an easy to use WebGL game engine that’s free and open source. It includes a physics engine (with support for rigid bodies, triggers, vehicles, and joints), graphics engine (with support for per-pixel lighting, shadows, and post effects), and more. PlayCanvas also includes collaborative development tools, and even includes free hosting for your games.

Construct 2

is a gaming engine designed specifically for 2d games. It’s great for everyone from the casual hobbyist to the professional developer who wants to create faster prototypes and mockups, or even save time on coding for production. It includes support for flexible behaviors, instant previews, a powerful event system, and easy extensibility. And of course, your games can be exported to a variety of platforms. You can download a free version with limited functionality (perfect for trying it out), or purchase a license starting at less than $130.

EaselJS

is a JavaScript library that makes it easier to work with the canvas element. Its API is familiar to Flash developers, but with JavaScript sensibilities. It includes object nesting, a mouse interaction model, and more. There are demos to get you started on everything from drag and drop to sprite sheets to filters and vector masks.

Phaser

is a fast and free open source framework that supports JavaScript and TypeScript. It uses WebGL and canvas, and has support for animation, particles, cameras, device scaling, tilemaps, and more.