当前位置：网站首页>《canvas》之第10章 canvas路径

《canvas》之第10章 canvas路径

2022-06-29 13:55:00 【yxqq378287007】

《canvas》之第10章 canvas路径

第10章 canvas路径

第10章 canvas路径

10.1 什么是路径

方法	说明
beginPath()	开始一条新路径
closePath()	关闭当前路径
isPointInPah()	判断点是否存在于当前路径内

10.2 beginPath()方法和closePath()方法

beginPath()方法和closePath()方法，只运用于canvas基本图形的绘制。

10.2.1 beginPath()方法

canvas基于状态绘制图形，每次绘制（stroke()或fill()），检查当前状态的所有值（strokeStyle、fillStyle、lineWidth等）。

cxt.beginPath();

beginPath()开始新路径，则不同路径使用不同值。
未使用beginPath()开始新路径，后面的值会覆盖前面的值。
未开始新路径（所有cxt.strokeStyle = “blue”）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 5; //第1条直线 cxt.moveTo(50, 40); cxt.lineTo(150, 40); cxt.strokeStyle = "red"; cxt.stroke(); //第2条直线 cxt.moveTo(50, 80); cxt.lineTo(150, 80); cxt.strokeStyle = "green"; cxt.stroke(); //第3条直线 cxt.moveTo(50, 120); cxt.lineTo(150, 120); cxt.strokeStyle = "blue"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

开始新路径（cxt.strokeStyle不同）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 5; //第1条直线 cxt.beginPath(); //可省略第一条路径 cxt.moveTo(50, 40); cxt.lineTo(150, 40); cxt.strokeStyle = "red"; cxt.stroke(); //第2条直线 cxt.beginPath(); cxt.moveTo(50, 80); cxt.lineTo(150, 80); cxt.strokeStyle = "green"; cxt.stroke(); //第3条直线 cxt.beginPath(); cxt.moveTo(50, 120); cxt.lineTo(150, 120); cxt.strokeStyle = "blue"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

10.2.2 closePath()方法

关闭路径，路径起点和终点连接起来，成为封闭图形。

cxt.closePath();

圆弧与扇形

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); //cxt.closePath(); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

箭头

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(40, 60); cxt.lineTo(100, 60); cxt.lineTo(100, 30); cxt.lineTo(150, 75); cxt.lineTo(100, 120); cxt.lineTo(100, 90); cxt.lineTo(40, 90); //cxt.closePath();//cxt.lineTo(40, 60); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

beginPath()配合closePath()使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.beginPath(); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true); cxt.closePath(); cxt.strokeStyle = "red"; cxt.stroke(); //cxt.beginPath(); cxt.arc(70, 120, 50, 0, -90 * Math.PI / 180, true); cxt.closePath(); cxt.strokeStyle = "blue"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

未使用closePath()绘制封闭图形

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 10; //cxt.beginPath(); cxt.moveTo(40, 60); cxt.lineTo(100, 60); cxt.lineTo(100, 30); cxt.lineTo(150, 75); cxt.lineTo(100, 120); cxt.lineTo(100, 90); cxt.lineTo(40, 90); cxt.lineTo(40, 60); //cxt.closePath(); cxt.strokeStyle = "HotPink"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

10.3 isPointInPah()方法

判断点是否存在于当前路径，不支持strokeRect()和fillRect()，只能用rect()代替。

cxt.isPointInPah(x, y);

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.strokeStyle = "HotPink"; cxt.rect(50, 50, 80, 80); cxt.stroke(); //cxt.strokeRect(50, 50, 80, 80); if (cxt.isPointInPath(100, 50)) {
       alert("点(100,100)存在于当前路径中"); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

Google和Firefox不支持点在直线上的判断，IE支持。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 50); cxt.lineTo(150, 50); cxt.stroke(); if (cxt.isPointInPath(100, 50)) {
       alert("点(50,100)存在于当前路径中"); } } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>