金沙56565
www.2061.com

日期:2015-12-03 / 人气: / 滥觞:

   本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”.

  让我们来看一下Canvas内置的简朴几何图形 — 矩形的绘制。在Canvas中,绘制矩形有三种办法:添补(fillRect)、描边(StrokeRect)以及肃清(clearRect)。固然,我们也能够利用“途径”来描画包罗矩形在内的所有图形。

  以下是上述三种办法的API:

  1.fillRect(x,y,width,height)。绘制一个从(x,y)开端,宽度为width,高度为height的实心矩形。

  2.strokeRect(x,y,width,height)。绘制一个从(x,y)开端,宽度为width,高度为height的矩形框。该矩形框会按照当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的差别而衬着成差别的款式。

  3.clearRect(x,y,width,height)。肃清从(x,y)开端,宽度为width,高度为height的矩形地区,使之完整通明。

  在挪用上述办法绘制Canvas之前,我们需求设定添补和描边的款式。设定这些款式最根本的办法是利用24位色(用16进制字符串暗示)。以下是一个简朴的例子:

  代码以下: context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff";

  鄙人面的例子中,添补色设定为玄色,而描边色则设定为紫色:

  代码以下: function drawScreen() { context.fillStyle = "#000000"; context.strokeStyle = "#ff00ff"; context.lineWidth = 2; context.fillRect(10, 10, 40, 40); context.strokeRect(0, 0, 60, 60); context.clearRect(20, 20, 20, 20); }

  

 

 

作者:


金沙贵宾会官网

如今致电 400-004-6862 OR 检察更多联系方式 →