我有这个 :
http://jsfiddle.net/geduardcatalin/6Lg6ymt3/
如何使第二条线从中心开始并在左下角停止,就像第一条线停在我想要的位置(在中心)一样?
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var i = 0;
var j = 0;
var k = 0;
var l = 0;
function drawLine1() {
i = i + 1;
j = j + 1;
x1 = i;
y1 = j;
if (i >= 149) {
i = 149;
}
if (j >= 149) {
j = 149;
}
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.moveTo(0, 0);
ctx.lineTo(x1, y1);
ctx.stroke();
}
function drawLine2() {
k = k - 1;
l = l + 1;
x2 = k;
y2 = l;
if (k >= 299) {
k = 299;
}
if (l >= 299) {
l = 299;
}
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.moveTo(150, 150);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawLines() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
drawLine1();
drawLine2();
//setTimeout(drawLine2, 0000);
}
setInterval(drawLines, 40);
* {
margin: 0;
padding: 0;
}
html {
background-color: #555555;
}
#wrapper {
width: 300px;
height: 300px;
margin: 70px auto;
border: 1px solid red;
}
<div id="wrapper">
<canvas id="myCanvas" height="300px" width="300px"></canvas>
<p id="demo"></p>
</div>
最佳答案
Line2中的变量k
和l
都应从150开始,并将draw Line2()
更改为:
这是更新的JSFiddle。
function drawLine2(){
k = k - 1;
l = l + 1;
x2 = k;
y2 = l;
if ( k <= 0 ){
k = 0;
}
if ( l >= 299 ){
l = 299;
}
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.moveTo(150, 150);
ctx.lineTo(x2, y2);
ctx.stroke();
}
关于javascript - HTML Canvas -JavaScript动画/绘图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33025580/