HTML5中使用Canvas的使用样例1 （画布定义、绘制直线）

1，Canvas的定义

默认画布在页面上会显示一块空白、无边框的矩形。为了让其显示轮廓，通过定义样式规则给其添加一个虚线边框：

canvas {
    border: 1px dashed black;
}

2，获取Canvas的上下文对象

要完成绘图任务，首先我们要拿到对象，接着取得其二维绘图上下文。
下面样例演示在页面加载完毕时获取绘图上下文：

3，画直线

（1）下面绘制一条起点是(50,50)，终点是(150,150)的直线线条

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

（2）使用lineWidth、strokeStyle属性分别设置线条的宽度和颜色

//线条宽度
context.line;
 
//线条颜色（支持颜色编码与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.line;
//线条颜色
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准备




 

 

  CANVAS CANNOT SUPPORTED!

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火焰动画