Question

我是canvas的新手。我想知道如何使用可滚动的画布窗口绘制一条线。我期望画布窗口适合屏幕，如果线条移到视图端口的外侧，则画布窗口可滚动直到查看该行的结尾。我试试这个代码。对于这个问题的任何想法。谢谢。

<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>

Answer 1

您可以让浏览器通过在较短的div中包裹较高的画布并设置较短的div overflow:scroll来添加滚动条。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();

body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }

<div id=viewport>
  <canvas id="canvas" width=300 height=1500></canvas>
</div>

使用可滚动画布窗口绘制线条

1 个答案: