Draw line with scrollable canvas window

Question

我是新来的画布我想知道如何用可滚动的画布窗口画一条线。我的期望是画布窗口适合屏幕，如果线条移到视口的外侧，那么画布窗口可以滚动直到查看行的结尾。我尝试这段代码。关于这个问题的任何想法。谢谢。

<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

You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's 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>

Draw line with scrollable canvas window

Question

1 answers

solution1
1 2016-02-02 19:59:59

Draw line with scrollable canvas window

Question

1 answers

solution1 1 2016-02-02 19:59:59

solution1
1 2016-02-02 19:59:59