你的位置:首页 > Java教程

[Java教程]canvas入门


<html>

  <head>

    <script>

  window.onload=function(){

      var canvas=document.getElementById('cs');    //获取到canvas元素

      var gt=canvas.getContext('2d');          //获取2d上下文对象

      //[1] gt.fillRect(10,10,100,100)          //在横坐标和纵坐标为10的地方创建一个长宽为100的方块

      //[2]gt.strokeRect(10,10,100,100)         //在横坐标和纵坐标为10的地方创建一个长宽为100的边框

      //[3]gt.fillStyle='blue';

      //    gt.fillRect(10,10,100,100);          //方块的颜色就变成了蓝色

      //[4]gt.strokeStyle='green';

      //   gt.strokeRect();                  //边框颜色就变成绿色

      //[5]gt.lineWidth=20;      

      //   gt.strokeRect();                //将边框宽度设置为20

      //[6]gt.lineJoin(round)           

      //   gt.strokeRect();                //设置成圆角的边框

      //[7]gt.beginPath()                //当在一个路径中创建两条线,第二条会覆盖掉第一条。因为在同一个路径;创建两个路径就不会覆盖 

      //[8]gt.closePath()                //当两条或者多条线条,一边想接的时候,会自动生成一条之间将其闭合

      //[9][10][11] gt.moveTo(50,50)         //在坐标(50,50)开始绘制一个点

      //    gt.lineTo(150,150)              //在坐标(150,150)绘制一个连接moveTo的点

      //    gt.stroke();                 //绘制出路径

}    

 

      

    </script>

  </head>

  <body >   //设置成和canvas不同颜色比较好区别

    <canvas id="cs" width="400" height="400" ></canvas>  //将canvas的画布设置成长为400和宽为400的白色背景

  </body>

</html>

 

//[1]fillRect(X,Y,W,H)  创建一个默认黑色的方块。  X,Y 表示坐标;W,H表示宽高 

//[2]strokeRect(X,Y,W,H)   创建一个默认黑色的边框。X,Y,W,同上

//[3]fillStyle   修改填充颜色

//[4]strokeStyle  修改边框颜色

//[5]lineWidth  修改边线的颜色

//[6]lineJoin(round or bevel)       修改边框样式    round 为圆角   bevel为斜切

//[7]beginPath()    开辟一条新路径

//[8]closePath()          闭合

//[9]moveTo(x,y)       将绘图游标移动到(x,y),就是在(x,y)这里开始绘图(一个点)

//[10]lineTo (x,y)     从上一个点绘画一条直线到(x,y)

//[11]stroke()      stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

//[12]fill()        由点绘制成图形的图形进行填充颜色

//[13]Rect(X,Y,W,H)  在指定坐标创建一个不填充颜色的方块([1]其实就是[12]和[13]的总和)

//[14]clearRect(x,y,w,h)    //清除掉画布上指定区域的东西