js学习心得之思维逻辑与对象上下文环境（一）

html5 canvas矩形绘制实例(绘图有js 实现)

html：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

</canvas>

js:

<script>
  var cvs=document.getElementtById("myCanvas"); /1./获取对应canvas元素
  var cxt=csv.getContext("2d");//2.getContext()是html 内置对象 ，创建drawing对象，获得相应属性和方法
      ctx.fillStyle = "#FF0000";//3.绘制图形
       ctx.fillRect(0,0,150,75);//fllRect(x,y,width,height)
</script>

心得：1.对写js/backend code 要有清晰的逻辑过程，要有步骤

2.类 对象 方法 （方法的调用要明确对象是谁 ，对象是什么类型，如何创建或获取对象，如例子中canvas 对象能调用getContext()方法获得绘图环境，创建了drawing对象，才能使用fillRect（）方法）

3.获取上下文对象，就可以调用对象内的属性和方法