canvas 设置线条的样式

2018-8-9 09:16| 作者: admin| 查看: 1479| 评论: 0|来自: 蚂蚁部落

这是一个比较简单的需求,下面就通过代码实例做一下介绍。

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

上面的代码通过lineWidth和strokeStyle属性设置了线条的宽度和颜色。

strokeStyle属性值也可以使用RGBA颜色,代码如下:

[JavaScript] 纯文本查看 复制代码
ctx.strokeStyle = "rgba(160,100,150,0.6)";

再来看一段代码实例:

[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 10;
  var linear = ctx.createLinearGradient(10, 10, 100, 100);
  linear.addColorStop(0.1, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.strokeStyle = linear;
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

线条的颜色也可以设置为渐变色,再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 10;
  var img = new Image();
  img.onload = function () {
    var pat = ctx.createPattern(img, "repeat");
    ctx.strokeStyle = pat;
    ctx.stroke();
  }
  img.src = "demo/js/img/lamp.gif";
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

strokeStyle属性值也可以是一个元素重复的pattern对象。

关于createPattern具体用法可以参阅canvas createPattern()一章节。

两个线条相交的样式:

使用lineJoin属性即可实现设置两个线条相交点的样式。

具体可以参阅canvas lineJoin一章节。

设置线条两端的样式:

使用lineCap属性即可实现此功能。

具体可以参阅canvas lineCap一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部