个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想在 Canvas 上绘制几条简单的线条，但如果我的脚本代码中没有 beginPath() 和 Restore() ，它将无法工作。您是否必须拥有这些才能在 HTML 5 Canvas 上绘制某些内容？
代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth="5";
ctx.strokeStyle="green"; // Green path
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(50,0);
ctx.lineTo(150,130);
</script>
</body>
</html>
最佳答案
Canvas 处理路径。
因此，顾名思义，beginPath 将开始一条新路径。
您稍后调用的每个保留绘制命令都会添加到当前路径。
(保留的绘制命令是没有直接效果的命令:moveTo、lineTo、(Curve)To、arc、rect。)
Rq1:使用moveTo是一个特殊的命令:它将开始一个新的子路径，就像从纸上松开笔一样。
Rq2 :closePath 不是必需的，如果您想轻松地将最后一个点链接到第一个点，请使用它。
当使用填充或描边时，当前保留路径(=当前路径的所有子路径)将使用当前变换、剪切和颜色设置进行描边/填充。
请注意，还有直接命令:fill/StrokeRect、fill/StrokeText、drawImage、get/putImageData。
这些命令不需要需要开始新路径，并且不影响当前路径 - 它们直接在 Canvas 上绘制 -。
所以规则很简单:
• 如果使用保留命令，则必须使用beginPath。
• 如果您使用直接命令，请不使用beginPath，只需发送命令。
正如您所注意到的，您可以更改 Canvas 上的许多设置:
•您有渲染设置:strikeStyle/fillStyle/globalCompositeOperation/globalAlpha/lineWidth/font/textAlign/Shadow/...
• 您拥有允许您平移/缩放/旋转下一次绘制的变换设置。
• 您可以定义剪裁以避免某些区域发生绘制。
save()和restore()让你不会迷失在当前 Canvas 的状态中。
规则是:无论如何，您更改上下文的方式可能会影响您制作的其他绘图的渲染，只需在之前保存()，然后恢复即可。
示例 1:
function strokeLine ( x1, y1, x2, y2, color) {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.moveTo(x1, y1);
ctx.lineTo(x2,y2);
ctx.stroke();
}
我使用了moveTo/lineTo(保留)命令，所以不假思索地我使用了beginPath。这里，笔触样式是在每次调用时设置的，因此不需要保存上下文。
示例 2:
function drawImageRotated( img, x, y, rotation ) {
ctx.save();
ctx.translate(x + img.width/2, y + img.height/2); // translate to the middle of the image
ctx.rotate(rotation); // rotate context
ctx.drawImage(img, x - img.width/2, y - img.height/2 ); // draw the image in rotated context
ctx.restore();
}
这里不需要使用beginPath()，因为我只使用直接命令(drawImage)。
但关于 Canvas 状态，我不希望上下文在调用后保持翻译/旋转。所以我以保存开始，以恢复结束，因此调用者在调用后保持相同的上下文。
关于javascript - 画一条线需要使用beginPath()和restore()吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24958545/
24
4
0
如何迭代(一行)分割函数给我的每个类？ 我试过这个: 编辑(抱歉) $("p").attr("class").split(' ').each (function (i,n){alert(n)}
我有一条垂直线和一条水平线，当我动态调整我的 Canvas 父级时，我想调整它们的大小。 (地标) 我希望水平线始终距 Canvas 的左右边界 25 处，距底部边界 13 处。 垂直线也是如此，距上
我有一个 y 变量，我试图在图形的顶部和底部针对两个相关的 x 轴绘制它(例如 y="立方体中的事物数"，x1="立方体的边长"， x2="立方体的体积")。我在 numpy 数组中有 y、x1、x2
我想画一条简单的水平线，并在这条线 flex 的地方制作动画。我有这个动画的视频。你能给我一些建议如何开始以及我必须使用哪个 js/css 吗？ 都是关于矩形底部的线: http://www.stop
我是一名优秀的程序员,十分优秀！