码迷,mamicode.com
首页 > 其他好文 > 详细

canvas画布

时间:2016-09-27 13:21:10      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

canvas标签:

<style type="text/css">
        #cvs{
            background:pink;
            /* 如果通过css定义宽高那么就是普通的给出一个显示的宽高,而不会给出一个绘画的宽高 */
            /* canvas是h5新增的标签,使用者可以在canvas上绘制图形;
                canvas是一对双标签,标签内部的内容当用户浏览器不支持canvas标签时显示;
                canvas只是在压面显示一个有背景色的画布,要进行绘制图形需要用到canvasAPI以及jsp
                canvas只有两个属性width height
                
             */
        }
    </style>
  </head>
  <body>
      <canvas width="300px" height="300px" id="cvs" >
          你的浏览器不支持canvas标签
      </canvas>

在canvas上画线条

/*
              1、getContext("2d")设置绘图环境
              获取对象指出访问绘图功能必要API
              2、lineWidth笔触宽度
              3、strokeStyle笔触样式
              4、moveTo()把路径移动到画布中的点,不创建线条
              5、lineTo()添加一个新点,创建该点到最后定义点的线条
              6、stroke()绘制已定义路径
          */
          
          
          var canvas = document.getElementById("cvs");
          var cxt = canvas.getContext("2d");//获得一个绘画的对象集
          cxt.lineWidth=10;//设置要画的线的宽度
          cxt.strokeStyle="rgb(0,255,0)";//设置样式
          cxt.moveTo(20,20);
          cxt.lineTo(123,30);
          cxt.stroke();//将绘制的东西显示出来

绘制封闭路径:

          var canvas = document.getElementById("cvs");
          var cxt = canvas.getContext("2d");//获得一个绘画的对象集
          
          cxt.beginPath();
          cxt.lineWidth=5;//设置要画的线的宽度
          cxt.strokeStyle="rgb(0,255,0)";//设置样式
          cxt.moveTo(20,20);
          cxt.lineTo(80,20);
          cxt.stroke();//将绘制的东西显示出来
          cxt.closePath();
          
          cxt.beginPath();
          cxt.strokeStyle="yellow";
          cxt.lineWidth=8;
          cxt.moveTo(40,40);
          cxt.lineTo(100,40);
          cxt.stroke();
          cxt.closePath();

绘制圆形

/*
              1、语法arc(x,y,r,起始点,终止点,方向)
              2、起始点终止点一半用弧度表示
                  弧度=角度*Math*PI/180
              
          */
          
          
          var canvas = document.getElementById("cvs");
          var cxt = canvas.getContext("2d");//获得一个绘画的对象集
          
          cxt.beginPath();
          cxt.arc(100,100,100,0,2*Math.PI,false);//第一二个参数是说明圆心点在哪,三参数是半径,第四五参数是指开始的角度和结束的角度,最后一个参数是说顺时针画还是逆时针画
          cxt.closePath();
          cxt.stroke();
          
          cxt.beginPath();
          cxt.arc(200,200,100,0,2*Math.PI,true);//第一二个参数是说明圆心点在哪,三参数是半径,第四五参数是指开始的角度和结束的角度,最后一个参数是说顺时针画还是逆时针画
          cxt.closePath();
          cxt.stroke();

 

canvas画布

标签:

原文地址:http://www.cnblogs.com/wujieBlogs/p/5912178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!