Canvas绘制一条线条可以使用strokeStyle方法来绘制线条的颜色。但是却是绘制一条直线的。
示例如下：
绘制一条黑色的线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
/*绘画第一条虚线*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
ctx.lineWidth = 30; // 设置线条的宽度
ctx.strokeStyle = "rgb(0,0,0)"; // 设置线条为黑色
/*绘画线条*/
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示如下：
但是设置线条的颜色不能设置渐变色呀，那么怎么办呢？
下面让我们来换个思路，首先线是由点来组成的，也就是说可以绘画无数个点，每个点设置不同的颜色，最后组合成为一条线，那么就可以绘画出渐变色来。
绘画255个点，设置颜色从0-255变化的点，组成线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
/*绘画第一条虚线*/
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
ctx.lineWidth = 30; // 设置线条的宽度
ctx.strokeStyle = "rgb(0,0,0)"; // 设置线条为黑色
ctx.stroke();
/*绘制 0 - 255 个点，组成渐变色线条*/
for (var i = 0; i < 255; i++) {
ctx.beginPath(); // 开启路径，设置不同的样式
ctx.moveTo(100 + i,300.5);
ctx.lineTo(101 + i,300.5);
ctx.lineWidth = 30; // 设置线条的宽度
ctx.strokeStyle = "rgb("+i+","+i+","+i+")"; // 设置每个点的颜色，从 0 - 255，从黑到白
ctx.stroke();
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>
浏览器显示如下：
