Canvas-绘制线条、绘制与切割图片及画布方法

创建路径绘制线条

    <canvas id="canvas" width="400px" height="400px"></canvas>
    
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        
        //只要使用路径作图就要调用
        context.beginPath();
        context.strokeStyle = "yellow";
        //  moveTo设置起点
        context.moveTo(20,20);
        //  lineTo设置终点/折点
        context.lineTo(100,100);
        context.lineTo(30,10);
        
        //  lineWidth设置线条的宽度
        context.lineWidth = 20;
        //   lineCap设置线条端点的形状  butt - 平角  round - 圆角   square - 正方向
        context.lineCap = "square";
        //   设置两条线交点的形状  miter - 尖角  round - 圆角  bevel - 斜角
        context.lineJoin = "miter";
        //设置尖角延伸范围  miterLimit - 配合lineJoinde的miter使用
        context.miterLimit = 100;
        //closePath()可以让起点和终点闭合
        //context.closePath();
        
        //  画图，此时划线使用stroke，使用fill无效
        context.stroke();

    </script>

绘制与切割图片

    <canvas id="canvas" width="400px" height="400px" style="background: red;"></canvas>
    
    <script type="text/javascript">

//绘制图片
        /*var context = document.getElementById("canvas").getContext("2d");

        //获取图片的两种方式
        //var img = document.createElement("img");
        //img.src = "class.jpg";
        
        var img = new Image();
        img.src = "class.jpg";

        //设置宽高是没效果的
        img.width = 200;
        img.height = 200;
        
        //当图片准备好后再绘制
        img.onload = function  () {
            //绘制图片,按照图片本身的大小加载
            //drawImage(img,x,y)  img - 当前加载的图片  x和y - 图片左上角的位置 
            context.drawImage(img,4,14)
        }*/
        
//平铺图片
        //var ptn = createPattern(img,type) 返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色  img : 平铺的图片  type: 平铺的方式

        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            //创建平铺对象
            var ptn = context.createPattern(img,"repeat");
            context.fillStyle = ptn;
            context.fillRect(0,0,400,400);
        }
    </script>

//切割图片
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        var img = new Image();
        img.src = "class.jpg";
        img.onload = function  () {
            context.drawImage(img,0,0);
        }
        //注意调用beginPath()
        context.beginPath();
        //指定路径
        context.arc(192/2,168/2,80,0,2*Math.PI);
        //开始切割，裁剪图片 clip()
        context.clip();
     </script>

画布方法，缩放平移和旋转

1.scale(x,y); - 缩放
  x - 水平方向上的缩放
  y - 初值方向上的缩放
  context.scale(sx,sy)
  context.fillRect(x,y,width,height)
  sx:  控制x和width的缩放
  sy:  控制y和height的缩放
  
    多次缩放效果会进行叠加

2.translate(x,y) - 重新映射画布上的（0,0）位置
  x，y改变了图形的参考点

3.rotate(); 旋转画布

   degrees * Math.PI / 180;
   
   degrees代表了你想旋转的角度，正数是顺时针旋转

4.save() 保存当前画布属性、状态

5.restore() 恢复画布属性状态

例子
    <canvas id="canvas" width="400px" height="400px" style="background: orange;"></canvas>
    
    <script type="text/javascript">
        var context = document.getElementById("canvas").getContext("2d");
        context.fillStyle = "chocolate";
        //缩放，x，y，width，height都按照比例缩放
        //x和width按照第一个参数的比例缩放
        //y和height按照第二个参数的比例缩放
        //context.scale(0.5,0.5);
        
        //translate平移其实是改变参考点的位置
        //没有设置平移前，参考点是（0,0）
        //context.translate(50,50)
        
        //设置旋转角度，正数是顺时针旋转，参考点为translate的x和y
        /*
         * 如果想设置中心旋转
         * 1.先利用translate改变旋转的参考点
         * 2.改变参考点以后图形的位置会发生变化，让图形的x和y分别减去translate的x和y，让图形恢复到原来的位置
         * 3.使用rotate让图形进行旋转
        */
        context.translate(200,200)
        context.rotate(45*Math.PI/180);
        context.fillRect(-100,-100,200,200);
    </script>