Blockly是Google开源出来的一个图形化编程框架，它的出现使得拖拖拽拽就能够把大部分的编程逻辑描述出来，这合适非程序员和小孩。Blockly作为一个框架只提供了基本的封装，而大部分的函数（功能）得根据具体的情况再进行封装，如你说到的绘制一个矩形的功能也是需要根据具体情况来封装来，再比如我之前用到的Espruino Web IDE就是封装了很多单片机硬件操作功能（我也是通过它认识的Blockly，所以提一下）。
回到Blockly画一个正方形，这里有一个Blockly的在线小游戏Blockly Games : Turtle Graphics，不知道奥玩的是否是这个游戏，这个游戏的第一关就是用Blockly代码画一个正方形。
打开游戏界面之后就是下图了，中间的Turle和Loops是功能模块选择，从中选择一个循环设置为循环4次、再选择一个直行操作和一个拐弯操作，做出如下图所示的组合，点击左边的Run Programe执行游戏：
图片描述
如果正常的话你可以看到左边的游戏界面上画出了一个正方形，同时在右边可以看到你的所有Blockly生成的js代码（没错就是四行），
图片描述
当然，除了用循环的方式来做你也可以老老实实的直走、右转90度、直走、右转90度、直走、右转90度、直走来完成第一关（可能大部分非程序员就是这种逻辑了）。
在刚刚生成的Blockly代码里面,"直走moveForward"和"右转turnRight"都是这个游戏对Blockly进行的封装。我也只玩了第一关，说句实在的，这种方式对程序员来讲还是太low了，突然间觉得比奥厉害很多了有没有。
转载，仅供参考。
context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")。
假设有一张图片，我们只用这张图片来填充正方形，图片存储为 girl.jpg。
该图片来源于网络。
Steve Fulton 与 Jeff Fulton 举了一个图片填充的示例（做了改写）。
运行结果：
首先创建了一个 Image() 对象，并设定好图片地址；接着定义 onload 事件，平铺放置该图片。
也可以选择不平铺（no-repeat）、y 轴平铺（repeat-y）或者 x 轴平铺（repeat-x）。
运行结果：
这里为了凸显出 repeat-x 效果，通过 context.translate() 方法把图片先移动到 (210,400）作为 fillRect() 方法的原点坐标。
document.writeln("<ul>")document.writeln(" <li><a href=\"/wap2/newsPage/1320\">5</a></li>")
document.writeln(" <li><a href=\"/wap2/newsPage/1319\">4</a></li>")
document.writeln(" <li><a href=\"/wap2/newsPage/1318\">3</a></li>")
document.writeln(" <li><a href=\"/wap2/newsPage/1317\">2</a></li>")
document.writeln(" <li><a href=\"/wap2/newsPage/1316\">1</a></li>")
document.writeln("</ul>")
