【www.bbyears.com--html5教程】
1，Canvas的定义
默认
canvas {
border: 1px dashed black;
}
2，获取Canvas的上下文对象
要完成绘图任务，首先我们要拿到
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//这里写绘图代码
}
</script>
3，画直线
（1）下面绘制一条起点是(50,50)，终点是(150,150)的直线线条
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
（2）使用lineWidth、strokeStyle属性分别设置线条的宽度和颜色
//线条宽度
context.lineWidth = 10;
//线条颜色（支持颜色编码与rgb()函数）
context.strokeStyle = "#cd2828";
context.strokeStyle = "rgb(205,40,40)";
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
（3）使用 lineCap 属性设置线条两端的形状（线头类型）：
butt：方头（默认值）
round：圆头
square：加长方头（效果与butt类似，但会在线条的两头各增加一半线宽的长度）
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//线条宽度
context.lineWidth = 10;
//线条颜色
context.strokeStyle = "#cd2828";
//第一条直线,默认方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
//第二条直线,使用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = "round";
context.stroke();
//第三条直线,使用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = "square";
context.stroke();
注：绘图上下文的beginPath()方法
上面样例可以看到每次开始新线段的绘制时，都要调用 beginPath() 方法。
如果没有这一步操作，那么每次调用 stroke() 都会把画布上原有的线段再重新绘制一边。特别像上面的例子，绘制新线段时都要修改上下文属性，如果不调用 beginPath() 方法，那么原有的直线也会使用新的样式绘制。
HTML5 Canvas 多层圆环动画
1.HTML和CSS准备
2，JS编写
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//参数定义
var CircleRadius = 10,//小圆的半径
RGB,//颜色
Angle, //角度
//计数器
NumOfSmallCircle=7, //最里层小圆的数量
NumOfRing=6, //圆形环数
AngleChangeSize = 0, //角度转动的程度
Direction, //圆圈转的方向，1为顺时针，-1为逆时针
//轨迹半径计算（因为考虑到轨迹上任意两圆的圆心到大圆的圆心距离相等，所以三点
//可以构成一个等腰三角形，我们再根据等腰三角形求边长的公式计算）
PathRadius = (CircleRadius*2+1)/2/(Math.sin(Math.PI*2/NumOfSmallCircle/2));
function DrawCircle(AngleChange){
for(var i=1;i<=NumOfRing;i++)
{
//用于图片旋转方向的判定设置
if(i%2==1)
{
Direction=1;
} else {
Direction=-1;
}
RGB = Math.floor(Math.random()*255);
for(var j=1;j<=NumOfSmallCircle*i;j++)
{
//计算角度
Angle = (Math.PI*2/NumOfSmallCircle/i*j)+(Math.PI*2/360*AngleChange*Direction);
context.beginPath();
//绘制小圆位置
context.arc(canvas.width/2+PathRadius*(i)*Math.cos(Angle),
canvas.height/2+PathRadius*(i)*Math.sin(Angle),CircleRadius,0,Math.PI*2,true);
//设置变化的RGB值
context.fillStyle = "rgb("+RGB+","+Math.floor(RGB/4)+","+(255-RGB)+")";
context.fill();
}
}
}
function Draw(){
//擦除上次的画圆结果，使得小圆的变化看起来是动态的
//如果不懂的话，注释掉下面一行，再看效果
context.clearRect(0,0,canvas.width,canvas.height);
//用于滚动设置
AngleChangeSize==360?AngleChangeSize=0:AngleChangeSize++;
DrawCircle(AngleChangeSize);
}
var LOOP = setInterval("Draw()",150);
其实这个的原理简单来讲就是：变换位置画圆，而变换的规则是按另一个圆的轨迹来进行的。也就是说，小圆的所有圆心都在大圆的轨迹上。 它由一个时间函数来控制，使得小圆（马猴烧酒）的位置随时间不停变化，并在旋转一周后将滚动值置零，循环画圆。 本例中每层圆的数目都是以倍数增加的，这个每层增加的圆的计算方法可以自己去设置，这里只是提供演示。至于角度的变化方法 是用 Math.PI*2/N 这里N是指每层圆的数目
HTML5 Canvas火焰动画
<script type="text/javascript">
window.onload = function(){
var keleyi_canvas =
document.getElementById("canvas-kel"+"eyi-com");
var ctx = keleyi_canvas.getContext("2d");
var W = window.innerWidth, H = window.innerHeight;
keleyi_canvas.width = W;
keleyi_canvas.height = H;
var particles = [];
var mouse = {};
//Lets create some particles now
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
particles.push(new particle());
}
keleyi_canvas.addEventListener("mousemove", track_mouse, false);
function track_mouse(e)
{
mouse.x = e.pageX;
mouse.y = e.pageY;
}
function particle()
{
this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
//location = mouse coordinates
//Now the flame follows the mouse coordinates
if(mouse.x && mouse.y)
{
this.location = {x: mouse.x, y: mouse.y};
}
else
{
this.location = {x: W/2, y: H/2};
}
//radius range = 10-30
this.radius = 10+Math.random()*20;
//life range = 20-30
this.life = 20+Math.random()*10;
this.remaining_life = this.life;
//colors
this.r = Math.round(Math.random()*255);
this.g = Math.round(Math.random()*255);
this.b = Math.round(Math.random()*255);
}
function draw()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "black";
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = "lighter";
for(var i = 0; i < particles.length; i++)
{
var p = particles[i];
ctx.beginPath();
p.opacity = Math.round(p.remaining_life/p.life*100)/100
var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
ctx.fillStyle = gradient;
ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
ctx.fill();
p.remaining_life--;
p.radius--;
p.location.x += p.speed.x;
p.location.y += p.speed.y;
if(p.remaining_life < 0 || p.radius < 0)
{
particles[i] = new particle();
}
}
}
setInterval(draw, 86);
}
</script>