HTML5 Canvas中绘图矩形框案例

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

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

让大家看来1下Canvas内嵌的简易几何图形图型 — 矩形框的绘图。在Canvas中,绘图矩形框有3种方式:填充(fillRect)、描边(StrokeRect)和消除(clearRect)。自然,大家还可以应用“相对路径”来勾勒包含矩形框在内的全部图型。

下列是上述3种方式的API:

1.fillRect(x,y,width,height)。绘图1个从(x,y)刚开始,宽度为width,高宽比为height的实心矩形框。
2.strokeRect(x,y,width,height)。绘图1个从(x,y)刚开始,宽度为width,高宽比为height的矩形框框。该矩形框框会依据当今设定的strokeStyle、lineWidth、lineJoin和miterLimit特性的不一样而3D渲染成不一样的款式。
3.clearRect(x,y,width,height)。消除从(x,y)刚开始,宽度为width,高宽比为height的矩形框地区,使之彻底全透明。

在启用上述方式绘图Canvas以前,大家必须设置填充和描边的款式。设置这些款式最基础的方式是应用24位色(用16进制标识符串表明)。下列是1个简易的事例:

拷贝编码
编码以下:

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);
}

编码实行結果以下图所示: