每当在html5画布上绘制形状时,都需要设置两个属性stroke(描边)和Fill(填充) 描边和填充属性每当在html5画布上绘制形状时,都需要设置两个属性: stroke stroke(描边)和Fill(填充)确定如何绘制形状。stroke是形状的轮廓。Fill是形状内部的内容。 在线示例这是一个用蓝色笔划和绿色填充绘制的矩形示例(实际上是两个矩形): 这是绘制这两个方框的代码: <canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;"> HTML5 Canvas not supported </canvas> <script> // 1.等待页面完全加载。 window.onload = function() { drawExamples(); } function drawExamples(){ // 2.获得对canvas元素的引用。 var canvas = document.getElementById("ex1"); // 3.从canvas元素获取2D上下文。 var context = canvas.getContext("2d"); // 4.绘制图形。 context.fillStyle = "#009900"; context.fillRect(10,10, 100,100); context.strokeStyle = "#0000ff"; context.linewidth = 5; context.strokeRect(10,100); } </script> 上面示例运行结果: 注意如何使用2D上下文的strokeStyle 和fillStyle属性分别设置描边样式和填充样式。 还要注意如何使用linewidth属性设置蓝色矩形的描边宽度(轮廓) 。将linewidth被设置为5,这意味着所概述矩形的线宽度为5。 最后,请注意如何指定2D上下文绘制填充矩形或描边矩形。 |