Canvas的 一点点记录

<!-- 在试图中创建 -->

<canvas id="myCan" width="500px" height="500px" style="border: 1px solid #3e2e40;"></canvas>

　---------------------------

<script>
  //拿到 当前canvas 画布节点 
  let canvas = document.getElementById('myCan')
  //做出一个判断 判断是否支持 或者说 一个非空判断
  if (canvas.getContext) {
    //拿起画笔 
    let ctx = canvas.getContext('2d');
    //画出第一个正方形
    //ctx.fillStyle  填充的颜色
    ctx.fillStyle = "#59a387";
    //ctx.fillRect  x,y,width,height
    //x 离left的距离  y 离top的距离
    ctx.fillRect(50,50,100,100)
  } else {
    alert('没有找到这个画布')
  }
</script>

　　---------------------------效果图

　

--------------------------------

<script>
  //拿到 当前canvas 画布节点 
  let canvas = document.getElementById('myCan')
  //做出一个判断 判断是否支持 或者说 一个非空判断
  if (canvas.getContext) {
    //拿起画笔 
    let ctx = canvas.getContext('2d');
    //画出第一个正方形
    //ctx.fillStyle  填充的颜色
    ctx.fillStyle = "#59a387";
    //ctx.fillRect  x,y,width,height
    //x 离left的距离  y 离top的距离
    ctx.fillRect(50,50,100,100);

    //再画一个 带有透明的
    ctx.fillStyle="rgba(43, 56, 77, 0.5)";
    ctx.fillRect(70,70,100,100)
  } else {
    alert('没有找到这个画布')
  }
</script>

　　-------------------效果图