canvas 绘制线条

2020-3-13 16:53| 作者: admin| 查看: 436| 评论: 0|来自: 蚂蚁部落

canvas 有绘制复杂图案能力,再复杂的图案也是有简单的元素构成。

本文通过代码实例介绍一下如何绘制一条简单的线条。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas{
  border:1px solid #ccc;
}  
</style>  
<script>
window.onload = function () {
  let canvas = document.getElementById("ant");
  let ctx = canvas.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(50, 80);
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="ant" width="180" height="100"></canvas>
</body>
</html>

上述代码可以绘制一条斜线,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/13/165438b3h44ama0dg40pm9.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下详细分析:

[JavaScript] 纯文本查看 复制代码
let canvas = document.getElementById("ant");
let ctx = canvas.getContext("2d");

通过document.getElementById("ant")获取<canvas>元素对象,也就是获取画布。

再利用<canvas>元素对象的getContext()方法获取绘图环境,具体参阅canvas getContext()一章节。

[JavaScript] 纯文本查看 复制代码
ctx.beginPath()

利用beginPath()方法可以创建一条新路径,具体参阅canvas beginPath()一章节。

[JavaScript] 纯文本查看 复制代码
ctx.moveTo(10, 10);
ctx.lineTo(50, 80);

moveTo()方法的参数是一个坐标,也就是将起始画笔笔触置于何处。

lineTo()方法的参数也是一个坐标,规定直线末端坐标。

将起始笔触点与直线的末端坐标连接起来,就形成了一条直线。

[JavaScript] 纯文本查看 复制代码
ctx.stroke();

如果不调用stroke()方法,则画布上看不到任何图案。

因为moveTo()和lineTo()方法只是勾勒出了绘图的路径,还需要stroke()描边操作。

建议参阅如下几篇文章:

(1).canvas 路径与子路径一章节。

(2).canvas beginPath()一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部