Bentuk Canvas HTML

实例

例子 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Cuba Sendiri

Canvas 线条绘制

线条绘制使用画布中的路径：

方法

beginPath() 方法开始一条新路径。它不绘制任何东西，它只是定义一条新路径。

moveTo() 定义线的起点。它不绘制任何东西，只是设置一个起点。

lineTo() 方法定义线的终点。它不绘制任何东西，只是设置一个终点。

stroke() 方法实际地绘制线条。默认笔触颜色为黑色。

更多实例

例子 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Cuba Sendiri

例子 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Cuba Sendiri

提示

如果要绘制矩形，您不必绘制 4 条线。

在下一章中，您将学习使用 drawRect() 方法来绘制矩形。

strokeStyle 属性

strokeStyle 属性定义在画布中绘制时要使用的样式。

mesti didahului stroke() atur ia sebelum mengambil

实例

ctx.beginPath();
//定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
//定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "merah";
ctx.stroke();

Cuba Sendiri

Lihat Juga:

Panduan Lengkap Canvas CodeW3C.com