Canvas使用beginPath()绘画不同颜色的直线
Canvas使用beginPath()绘画不同颜色的直线
Devops海洋的渔夫
发布于 2019-12-26 17:43:00
发布于 2019-12-26 17:43:00
文章被收录于专栏：Devops专栏
Canvas绘画三条平行线
<!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 context = myCanvas.getContext('2d');
/*绘制第一条线*/
context.moveTo(100,100.5);
context.lineTo(200,100.5);
/*绘制第二条线*/
context.moveTo(100,200);
context.lineTo(200,200);
/*绘制第三条线*/
context.moveTo(100,300);
context.lineTo(200,300);
/*描边*/
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器展示如下：
使用strokeStyle和lineWidth设置画笔的颜色以及宽度
context.strokeStyle = 'pink'; // 设置颜色
context.lineWidth = 10; // 设置宽度从图中可以看到，在每条直线都设置上了颜色和宽度，那么会不会画出三条不同颜色的直线呢？
看看浏览器展示如下：
原因是因为每条直线都各自设置context的属性，上面的属性设置都被最下面的设置覆盖了，所以就是最后设置的粉红色。
那么怎么才可以绘画出三条不同颜色的指向呢？
使用beginPath()开启新路径，绘画三条不同颜色的直线
context.beginPath(); // 开启新路径
context.stroke();注意：每次设置开启新路径之后，都要设置描边，不然就会无法绘画。
看看浏览器的展示如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
