Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset
Canvas 设置样式 lineWidth、lineCap、lineJoin、strokeStyle、fillStyle、setLineDash、getLineDash、lineDashOffset
Devops海洋的渔夫
发布于 2020-02-13 13:33:47
发布于 2020-02-13 13:33:47
设置Canvas画笔的样式
- 画笔的状态
- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round、square
- lineJoin 相交线的拐点 miter(默认)、round、bevel
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）
lineWidth 设置线条的宽度
<!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); // 起点
context.lineTo(300,100); // 第一条线
context.lineTo(300,300); // 第二条线
context.lineTo(100,300); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*设置线条*/
context.lineWidth = 50;
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器展示如下：
lineCap 线末端类型：(butt默认)、round、square
下面使用lineCap画三条线条的末端，用于区分展示，示例如下：
<!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.beginPath();
context.moveTo(100,100);
context.lineTo(300,100);
context.lineWidth = 20; // 设置线条宽度 10px
context.strokeStyle = 'red'; // 设置线条的颜色
context.stroke(); // 描边
// 第二条线
context.beginPath();
context.moveTo(100,150);
context.lineTo(300,150);
context.lineWidth = 20; // 设置线条宽度 10px
context.strokeStyle = 'blue'; // 设置线条的颜色
context.lineCap = 'round'; // 设置末端为round
context.stroke();
// 第三条线
context.beginPath();
context.moveTo(100,200);
context.lineTo(300,200);
context.lineWidth = 20; // 设置线条宽度 10px
context.strokeStyle = '#ccc'; // 设置线条的颜色
context.lineCap = 'square'; // 设置末端为square
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器展示如下：
同时要知道，当线条的宽度越大，线条对应增加的帽子也就越大，如下：
lineJoin 相交线的拐点 miter(默认)、round、bevel
上面绘画了三条平行线设置了末端样式，下面给三条平行线进行打折，使用lineJoin的方式设置拐点的样式。
<!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.beginPath();
context.moveTo(100,100);
context.lineTo(200,50); // 设置拐点
context.lineTo(300,100);
context.lineWidth = 30; // 设置线条宽度 30px
context.strokeStyle = 'red'; // 设置线条的颜色
context.stroke(); // 描边
// 第二条线
context.beginPath();
context.moveTo(100,150);
context.lineTo(200,100); // 设置拐点
context.lineTo(300,150);
context.lineWidth = 30; // 设置线条宽度 30px
context.strokeStyle = 'blue'; // 设置线条的颜色
context.lineCap = 'round'; // 设置末端为round
context.lineJoin = 'round'; // 设置拐点为round
context.stroke();
// 第三条线
context.beginPath();
context.moveTo(100,200);
context.lineTo(200,150); // 设置拐点
context.lineTo(300,200);
context.lineWidth = 30; // 设置线条宽度 30px
context.strokeStyle = '#ccc'; // 设置线条的颜色
context.lineCap = 'square'; // 设置末端为square
context.lineJoin = 'bevel'; // 设置拐点为bevel
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
fillStyle 填充颜色
context.fillStyle = 'red'; // 设置填充颜色下面绘画一个正方形，并使用fillStyle来填充颜色。
<!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); // 起点
context.lineTo(300,100); // 第一条线
context.lineTo(300,300); // 第二条线
context.lineTo(100,300); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*绘画逆时针内部正方形*/
context.moveTo(250,150); // 起点
context.lineTo(150,150); // 第一条线
context.lineTo(150,250); // 第二条线
context.lineTo(250,250); // 第三条线
context.closePath(); // 结束路径，自动闭合
/*填充颜色*/
context.fillStyle = 'red'; // 设置填充颜色
context.fill();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
setLineDash() 设置虚线
<!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);
/*[5,10] 数组是用来描述你的排列方式的*/
ctx.setLineDash([10,30]);
/*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
console.log(ctx.getLineDash());
/*如果是正的值 往后偏移*/
/*如果是负的值 往前偏移*/
ctx.lineDashOffset = -20;
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录