在canvas上绘图之前，我们需要先建立一个到它的引用。脚本中的第一行起到的正是这个作用。我们为变量canvas建立了一个到文档中出现的第一个canvas元素的引用。varcanvas=document.querySelector("canvas");这个canvas对象--又叫HTMLCanvasElement对象-除了拥有width与height属性外，还拥有getContext()方法。使用“2d”这个参数，我们得以接触到Canvas的核^---CanvasRenderingContext2D〇varcontext=canvas.getContext('2d');在定义了绘制环境后，我们可以开始绘制这两个矩形了。拋开fillStyle属性及fillRectO方法的细节不谈，
宁波网站制作认为这两者的基本流程都是先定义填充色然后形成矩形。
回到2D环境，CanvasRenderingContext2D在许多方面都很有潜力，并显然很适合用来编写复杂应用。图显示了一个简单的条形图，展示了该绘制环境的3个特性：矩形、颜色及阴影。
矩形
Canvas能通过4种方法来创建矩形，我们现在先讨论其中3种，第4种将在后面的路径部分中介绍：
context.fillRect(x,y,w,h)context.strokeRect(x,y,w,h)context.clearRect(x,y,w,h)这3种方法的名称已经阐明了它们的作用：fillRectO用于创建被填充的矩形，strokeRectO创建有边框但无填充的矩形，而clearRectO可以像橡皮一样抹掉已有内容。矩形尺寸由4个数值参数决定：坐标x/y、宽度w及高度h。
在Canvas中，坐标原点通常位于左上方，这意味着x轴向右延伸而y轴向下延伸(见图)0与此同时，我们需要为条形图的canvas元素及绘制环境定义参数。函数drawBars()用于完成主要工作——绘制条形图。我们在此函数中加人想要得到的条形数量：
调用函数drawBars(lO),先用clearRect〇删除所有现有内容，然后用fillRect()和strokeRect〇在for循环中绘制10个矩形，并分别为其加上填充和边框。条形的宽度变量w介于0到canvas元素的最大宽度之间，随机由JavaScript函数Math.random()决定。函数Math_ran[a-z]o[a-z]()可以生成一个介于.0之间的随机数，再乘上画布的尺寸，就可以生成随机的宽、髙、位置。
我们根据画布高度来决定条形高度以及平均间距，这里的算法是画布高度除以条形数童乘以为条形髙度。
如案例一所述，canvas的宽度和高度都可以轻松地在属性canvas.width及canvas.height中找到。我们也可以通过使用绘制环境中的context.canvas属性访问HTMLCanvasElement,并在每次单击画布时生成一个新的条形。在drawBars(lO)后面再加入3行代码就行了：
context.canvas.onclick=function(){drawBars(lO);}；现在我们清楚这10个条形是如何形成的了，但它们的边框是如何变成浅灰色或者黑色的呢？下面让我们来看看为Canvas分配颜色的选项。
本文由乐华网络编辑，转载请注明出处
宁波网站制作www.leseo.net
