canvas描边和填充介绍

2018-8-10 00:29| 作者: admin| 查看: 993| 评论: 0|来自: 蚂蚁部落

绘图的方式通常有两种,描边和填充;下面分别通过代码实例对此做一下介绍。

一.描边:

所谓的描边,就是为路径绘制出边缘线条。

使用stroke()方法即可实现描边功能,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.rect(20, 20, 150, 100);
  ctx.stroke();
}
  </script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

默认条件下,描边的宽度是1px,黑色,当然这一切都是可以自定义的。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var gradient = ctx.createLinearGradient(0, 0, 170, 0);
  gradient.addColorStop("0", "magenta");
  gradient.addColorStop("0.5", "blue");
  gradient.addColorStop("1.0", "red");
  ctx.strokeStyle = gradient;
  ctx.lineWidth = 5;
  ctx.rect(20, 20, 150, 100);
  ctx.stroke();
}
  </script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

上面的代码将矩形的描边样式设置为线性渐变,宽度为5px。

相关阅读:

(1).strokeStyle属性参阅canvas strokeStyle一章节。

(2).lineWidth属性参阅canvas lineWidth一章节。

(3).rect()方法参阅canvas rect()一章节。

二.填充:

所谓填充就是用指定颜色或者图案来填充路径包裹的区域。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.lineTo(100, 100);
  ctx.fillStyle = "green";
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的代码实现了对路径的填充功能,填充颜色为绿色。

如果一个路径没有闭合,会不会被填充呢,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.fillStyle = "green";
  ctx.strokeStyle = "red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

没有闭合的路径也是可以填充的,但是没有闭合的部分没有描边。

再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.moveTo(200, 200);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.fillStyle = "green";
  ctx.strokeStyle = "red";
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的代码无法进行填充,因为中间路径断开了,必须“一笔”下来的路径可以填充。


鲜花

握手

雷人

路过

鸡蛋
返回顶部