你的位置:首页 > 软件开发 > Java > canvas入门

canvas入门

发布时间:2016-07-25 18:00:30
<html>  <head>    <script>  window.onload=function(){      var canvas=document.getElementById(cs);    //获取到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)    //清除掉画布上指定区域的东西    

 


原标题:canvas入门

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录