canvas 虚线矩形

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

本文介绍一下如何了用canvas绘制一个虚线矩形。

默认情况下绘制的都是实线图案。

代码实例如下:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001042v3nz4n2znby1gr41.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码绘制了一个实线矩形,下面将其修改为虚线矩形。

代码实例如下:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/22/001129l5an7zcwzaw78g7a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

绘制了一个虚线矩形,关键在于对setLineDash方法的理解。

具体参阅setLineDash() 绘制虚线一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部