html5canvas平台an,html Canvas
HTML5中的Canvas到底有什么神奇的力量？
Canvas是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。
HTML5的canvas绘图和CSS3的绘图哪个更有优越性
简单解释一下：
CSS更像是把多个“矩形”（div）裁剪后，然后拼接成一个图案，然后给图案上色。
Canvas由点开始，延长无数个点，得到线，延长线之后得到一个面（三角形，圆形，矩形等等的图案面），然后给线或者面描边，上色。
CSS目前更像是小朋友的手工课，Canvas更像是用一支笔画图，不过画出来的图更加像能够控制大小的矢量图片。
下图简单说明
在面对曲线和更复杂图形的时候，Canvas比CSS更有办法。另外Canvas确定坐标位置的时候更加贴近我们常用到的数学思维方法。
只能显浅说说。
怎样用HTML5 Canvas制作一个简单的游戏
canvas只是HTML5的一个新标签他只提供了一个平台，需要js来完成游戏的操作给你一个HTML5开发水果忍着的游戏，抱歉发布了连接，需要的话去零零H5下载吧
SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途
anvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。
从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示；所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途：从上面我们可以知道二者是有不同用途的，作为一个开发者，你应该做的是理解应用程序的
。
HTML5中Canvas的事件处理介绍
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个 元素，可以直接用jquery增加click事件$('#p1').click(function(){…})"。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：
代码如下:
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect); //undefined
这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。
所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。
给Canvas元素绑定事件
由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的`哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。
首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：
代码如下:
cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
//...
}, false);
接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
代码如下:
function getEventPosition(ev){
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
return {x: x, y: y};
}
//注：使用上面这个函数，需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
代码如下:
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50); //true
ctx.isPointInPath(5, 5); //false
接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
代码如下:
cvs.addEventListener('click', function(e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}
}, false);
以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：
代码如下:
HTML5用canvas怎么实现动画效果
主要思想：
首先要准备一张有连续帧的图片，然后利用HTML5
Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。
关键技术点：
JavaScript
函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，
另外一个参数代表间隔时间，单位为毫秒数。代码示例：
setTimeout(
update,
1000/30);
Canvas的API-drawImage()方法，需要指定全部9个参数：
ctx.drawImage(myImage,
offw,
offh,
width,height,
x2,
y2,
width,
height);
其中offw,
offh是指源图像的起始坐标点，width,
height表示源图像的宽与高，x2,y2表
示源图像在目标Canvas上的起始坐标点。
!DOCTYPE
html
head
meta
http-equiv="X-UA-Compatible"
content="chrome=IE8"
meta
http-equiv="Content-type"
content="text/html;charset=UTF-8"
titleCanvas
Mouse
Event
Demo/title
link
href="default.css"
rel="stylesheet"
/
script
var
ctx
=
null;
//
global
variable
2d
context
var
started
=
false;
var
mText_canvas
=
null;
var
x
=
0,
y
=0;
var
frame
=
0;
//
22
5*5
+
2
var
imageReady
=
false;
var
myImage
=
null;
var
px
=
300;
var
py
=
300;
var
x2
=
300;
var
y2
=
0;
window.onload
=
function()
{
var
canvas
=
document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width
=
canvas.parentNode.clientWidth;
canvas.height
=
canvas.parentNode.clientHeight;
if
(!canvas.getContext)
{
console.log("Canvas
not
supported.
Please
install
a
HTML5
compatible
browser.");
return;
}
//
get
2D
context
of
canvas
and
draw
rectangel
ctx
=
canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0,
0,
canvas.width,
canvas.height);
myImage
=
document.createElement('img');
myImage.src
=
"../robin.png";
myImage.onload
=
loaded();
}
function
loaded()
{
imageReady
=
true;
setTimeout(
update,
1000/30);
}
function
redraw()
{
ctx.clearRect(0,
0,
460,
460)
ctx.fillStyle="black";
ctx.fillRect(0,
0,
460,
460);
//
find
the
index
of
frames
in
image
var
height
=
myImage.naturalHeight/5;
var
width
=
myImage.naturalWidth/5;
var
row
=
Math.floor(frame
/
5);
var
col
=
frame
-
row
*
5;
var
offw
=
col
*
width;
var
offh
=
row
*
height;
//
first
robin
px
=
px
-
5;
py
=
py
-
5;
if(px
-50)
{
px
=
300;
}
if(py
-50)
{
py
=
300;
}
//var
rate
=
(frame+1)
/22;
//var
rw
=
Math.floor(rate
*
width);
//var
rh
=
Math.floor(rate
*
height);
ctx.drawImage(myImage,
offw,
offh,
width,
height,
px,
py,
width,
height);
//
second
robin
x2
=
x2
-
5;
y2
=
y2
+
5;
if(x2
-50)
{
x2
=
300;
y2
=
0;
}
ctx.drawImage(myImage,
offw,
offh,
width,
height,
x2,
y2,
width,
height);
}
function
update()
{
redraw();
frame++;
if
(frame
=
22)
frame
=
0;
setTimeout(
update,
1000/30);
}
/script
/head
body
h1HTML
Canvas
Animations
Demo
-
By
Gloomy
Fish/h1
prePlay
Animations/pre
div
id="my_painter"
canvas
id="animation_canvas"/canvas
/div
/body
/html