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

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

html：

?

1 2 3

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

js:

?

1 2 3 4 5 6

<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.获取上下文对象，就可以调用对象内的属性和方法