<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
style
>
canvas{
border:
1px
solid
#f00;
}
<
/
style
>
<
body
>
<!--1 设置画布的大小，记住宽高一定要在canvas标签里面设置，不然画布会拉伸，变形 -->
<
canvas
id=
"cas"
width=
"300"
height=
"300"
></
canvas
>
</
body
>
<
script
>
// 2获取到画布元素
var
cas =
document.
getElementById(
"cas");
// 3获取画布上下文对象
var
ctx =
cas.
getContext(
"2d");
// 4开始封装函数
function
cans(
simple,
arr) {
// 4.1声明变量获取到数组的第一个值，也就是图形的起点
var
point =
arr[
0];
// 4.2开始设置画布起点
simple.
moveTo(
point.
x,
point.
y);
// 4.3使用遍历进行中间步骤的实现
for (
let
i =
1;
i <
arr.
length;
i++) {
// 4.4声明变量，获取到数组arr中除了起点以外的值
var
point1 =
arr[
i];
// 4.5中间其他线条的实现
simple.
lineTo(
point1.
x,
point1.
y);
}
// 4.6连接起点
simple.
lineTo(
point.
x,
point.
y);
// 4.7执行代码
simple.
stroke();
}
// 5设置要实现的数组
var
arr=[
{
x:
10,
y:
10},
{
x:
100,
y:
10},
{
x:
10,
y:
100},
{
x:
100,
y:
100},
]
// 6调用函数
cans(
ctx,
arr);
<
/
script
>
</
html
>