Canvas学习笔记

html 新增标签值Canvas学习

例如在页面中新建
画布的宽高，与标签的宽高不是一样的，画布宽高必须设置在标签上

 <canvas id="can" width="500px" height="300px"></canvas>
  <script>
      var canvas = document.getElementById("can");
      var ctx = canvas.getContext("2d");
      ctx.lineWidth = 10;
       ctx.moveTo(100, 100);//起点
      ctx.lineTo(200, 100);//规划路径
       ctx.lineTo(200,200);
       ctx.closePath();//闭合连续的线
      ctx.stroke();//渲染到页面上
   </script>

beignPath 是从新开始画一条线

    ctx.lineWidth = 10;//线条的粗细
      ctx.moveTo(100, 100);//起点
      ctx.lineTo(200, 100);//规划路径

      ctx.closePath();//闭合连续的线
      ctx.stroke();//渲染到页面上
      ctx.beginPath();//从新开启一条线
      ctx.lineWidth = 1;
      ctx.moveTo(200, 100)
      ctx.lineTo(200,200);
      ctx.lineTo(100,100);
    //   ctx.fill();//填充图形
      ctx.stroke();

画矩形的简易方法
矩形是填充的

 ctx.rect(100, 100, 200, 100);//画矩形 100 100 起始点坐标   200 100  长  宽
        ctx.fill();
        ctx.stroke();

非填充的矩形

  ctx.strokeRect(100,100, 200, 100); //  矩形

填充的矩形

 ctx.fillRect(100, 100, 200, 100);//有填充

动画
可以移动的小方块

    var height = 100;
        var timer =setInterval(function(){
            ctx.clearRect(0, 0, 500, 300);//清除画布内容
            ctx.fillRect(100, height, 50, 50);
            height += 5;
        },1000/30);

画圆形

      //  圆心（x,y） 半径(r) 弧度（起始弧度， 结束弧度）， 方向（顺时针，逆时针）
            ctx.arc(100, 100, 50, 0,Math.PI * 1.7, 0);
            ctx.lineTo(100, 100);
            ctx.closePath();
            ctx.stroke();

画圆矩形

   // B(x,y)初始点  C(x,y)提供方向  圆角大小
        ctx.moveTo(100, 110);
           ctx.arcTo(100, 200, 200, 200, 10);
           ctx.arcTo(200, 200, 200, 100, 10);
           ctx.arcTo(200, 100, 100, 100, 10);
           ctx.arcTo(100, 100, 100, 200, 10);
           ctx.fill();
           ctx.stroke();

贝塞尔曲线

        // ctx.beginPath();
        // ctx.moveTo(100,100);
        // // ctx.quadraticCurveTo(200,200,300,100);//二次贝塞尔曲线
        // ctx.bezierCurveTo(200, 200, 300, 100, 400, 200);//三次贝塞尔曲线
        // ctx.stroke()