canvas之十字架，beginPath()的作用

本文主要是介绍canvas之十字架，beginPath()的作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本次我们主要讲两点：一点是如何绘制十字架，另一点是beginPath()的作用。
用canvas绘制十字架并不难，首先我们要对其必要的元素坐标胸有成竹，我们可以在画板上画出并标出必要地方的元素坐标，如下所示（右侧是坐标轴）：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas</title><style>#myc{border:1px solid rgba(250,20,20,1);  display:block;margin:auto;}</style>
</head>
<body><canvas id="myc"></canvas><script>//var c=document.getElementById("myc"); c.width=300;c.height=300;var cxt=c.getContext("2d");  var x=100,y=120,w=110;cxt.moveTo(x,y);cxt.lineTo(x+w,y);cxt.linewidth=40;cxt.strokeStyle="blue";cxt.stroke();   //注释一cxt.beginPath();  //注释二cxt.moveTo(x+w/2,y-w/2);cxt.lineTo(x+w/2,y+w/2);cxt.linewidth=40;cxt.strokeStyle="green";cxt.stroke();</script>
</body>
</html>

注释一：当我们没有用到代码beginPath()时，此处的stroke()可以省略，只在最后用一次即可。
注释二：beginPath()是表明接下来绘制的图形将是一个新的路径，在本段代码中若没有本行代码，十字架的颜色便只会是绿色，因为不使用beginPath()就表示着上下两条线段属于同一路径，而在同一路径中使用的是代码中的最后一个样式。另外与beginPath()代码相对应的是closePath(),然而要注意的是closePath()不是结束路径，而是关闭当前路径。在他之后的路径并不是一个新的路径，所以只有使用beginPath()才能实现一段新的绘图路径。

这篇关于canvas之十字架，beginPath()的作用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！