核心提示：需求：用canvas画一个边框样式不一样的矩形方法一：简单粗暴，直接用canvas填充矩形，给canvas标签设置样式即可。（推荐）!DOCTYPE htmlhtmlheadtitlecanvas画边...
需求：用canvas画一个边框样式不一样的矩形
方法一：简单粗暴，直接用canvas填充矩形，给canvas标签设置样式即可。（推荐）
<!DOCTYPE html>
<html>
<head>
<title>canvas画边框不一样的长方形</title>
<style>
.canvas {
border-top: 5px solid #aaa;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 20px solid black;
display: block;
margin: 50 auto;
}
</style>
</head>
<body>
<canvas id="canvas" class="canvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'pink';
ctx.fillRect(0, 0, 400, 300);
</script>
</body>
</html>
效果如下：
方法二：一条线一条线的画边框，再填充,此方法比较麻烦，且ctx.lineWidth较大时，有瑕疵
<!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>cancas画边框样式不一样的矩形</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//左边框
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(10, 180);
ctx.closePath(); //闭合路径
ctx.lineWidth = 1; //线的边框为10像素
ctx.strokeStyle = 'blue';
ctx.stroke(); //绘制定义的图形
//下边框
ctx.beginPath();
ctx.moveTo(10, 180);
ctx.lineTo(180, 180);
ctx.closePath(); //闭合路径
ctx.lineWidth = 1; //线的边框为10像素
ctx.strokeStyle = 'green';
ctx.stroke(); //绘制定义的图形
//右边框
ctx.beginPath();
ctx.moveTo(180, 180);
ctx.lineTo(180, 10);
ctx.closePath(); //闭合路径
ctx.lineWidth = 1; //线的边框为10像素
ctx.strokeStyle = 'red';
ctx.stroke(); //绘制定义的图形
//上边框
ctx.beginPath();
ctx.moveTo(180, 10);
ctx.lineTo(10, 10);
ctx.closePath(); //闭合路径
ctx.lineWidth = 1; //线的边框为10像素
ctx.strokeStyle = 'black';
ctx.stroke(); //绘制定义的图形
ctx.rect(10, 10, 170, 170);
ctx.fillStyle = "pink";
ctx.fill();
</script>
</body>
</html>
效果如下：
