<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
canvas{
background: blue;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
//获得画板
var canvas=document.getElementById("canvas");
//获得绘画环境
var cv=canvas.getContext('2d');
//开启路径（相当于大喊一声我要开始画了）
cv.beginPath();
//移动笔触到开始位置
cv.moveTo(200,50);
//指定要画到哪里去
cv.lineTo(200,450);
//把线条画出来
cv.stroke();
cv.lineTo(500,450);
cv.stroke();
// 闭合路径
cv.closePath();
// 指定填充颜色
cv.fillStyle='yellow';
//填充路径
cv.fill();
</script>
</body>运行结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
canvas{
background: blue;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
//获得画板
var canvas=document.getElementById("canvas");
//获得绘画环境
var cv=canvas.getContext('2d');
//开启路径（相当于大喊一声我要开始画了）
cv.beginPath();
//移动笔触到开始位置
cv.moveTo(200,50);
//指定要画到哪里去
cv.lineTo(200,450);
//定义划线的粗细
cv.lineWidth='10';
//定义划线颜色
cv.strokeStyle='white';
//把线条画出来
cv.stroke();
cv.lineTo(500,450);
cv.stroke();
// cv.lineTo(200,50);
// cv.stroke();
// 关闭路径(将形状闭合将最终笔触的位置和开始点的笔触连接起来形成一个闭合的图形)
cv.closePath();
cv.stroke();
</script>
</body>
</html>运行结果如下:
