动画 html 代码在 canvas 而不是 运行
Animation html code in canvas not running
我已经在 html5 中将下面的代码写到 运行 但它似乎不起作用。当用户点击 canvas 时,下面的代码应该是 运行。我似乎无法确定这里的问题是什么。据我所知,其他一切似乎都是正确的:
var ctr = document.getElementById("canvas").getContext("2d");
function sol86() {
var ctx = d3.select('#lines')
.append('ctx')
.attr("width", "100%")
.attr("height", "100%");
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
var id = 1;
var ww = window.innerWidth; // Width of the window viewing area
var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) { // 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
id: id, // For identification and debugging
x1: x1,
y1: y1,
x2: x1 + 50, // Move 100 to the right
y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
})
id++;
}
return data;
}
var lineData = lineData();
console.log(lineData);
var line = ctx.selectAll("line")
.data(lineData)
.enter().append('line')
.attr("id", function(d) {
return d.id;
})
.attr("x1", function(d) {
return d.x1;
})
.attr("y1", function(d) {
return d.y1;
})
.attr("transform", function(d) {
return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
})
.attr("x2", function(d) {
return d.x1;
})
.attr("y2", function(d) {
return d.y1;
}).transition().delay(function(d, i) {
return 1.5 * i;
}).duration(750)
.attr("x2", function(d) {
return d.x2;
})
.attr("y2", function(d) {
return d.y2;
});
}
// run on load
$(document).ready(function(event) {
$(window).on("click", function(event) {
d3.selectAll("ctr").remove();
sol86();
});
});
$(window).resize(function() {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
d3.selectAll("ctr").remove();
sol86();
});
body {
margin: 0;
}
.drawing {
margin: 0;
}
#lines {
width: 100%;
height: 100%;
}
line {
stroke: #111;
stroke-width: 1;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='1000'></canvas>
<div class="drawing">
<div id="lines"></div>
</div>
这里有人能帮我解决这个问题吗?
您正在创建奇怪的 <ctx>
标签而不是 <svg>
标签。我已经改变了。 canvas 有一个背景,这样我就可以看到它并单击它。我也把它变小了。希望对你有帮助。
var ctr = document.getElementById("canvas").getContext("2d");
function sol86() {
var ctx = d3.select('#lines')
.append('svg')
.attr("width", "100%")
.attr("height", "100%");
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
var id = 1;
var ww = window.innerWidth; // Width of the window viewing area
var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) { // 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
id: id, // For identification and debugging
x1: x1,
y1: y1,
x2: x1 + 50, // Move 100 to the right
y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
})
id++;
}
return data;
}
var lineData = lineData();
//console.log(lineData);
var line = ctx.selectAll("line")
.data(lineData)
.enter().append('line')
.attr("id", function(d) {
return d.id;
})
.attr("x1", function(d) {
return d.x1;
})
.attr("y1", function(d) {
return d.y1;
})
.attr("transform", function(d) {
return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
})
.attr("x2", function(d) {
return d.x1;
})
.attr("y2", function(d) {
return d.y1;
}).transition().delay(function(d, i) {
return 1.5 * i;
}).duration(750)
.attr("x2", function(d) {
return d.x2;
})
.attr("y2", function(d) {
return d.y2;
});
}
// run on load
$(document).ready(function(event) {
$(window).on("click", function(event) {
d3.selectAll("ctr").remove();
sol86();
});
});
$(window).resize(function() {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
d3.selectAll("ctr").remove();
sol86();
});
body {
margin: 0;
}
.drawing {
margin: 0;
}
#lines {
width: 100%;
height: 100%;
}
line {
stroke: #111;
stroke-width: 1;
}
canvas{background:#d9d9d9;}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='50%'></canvas>
<div class="drawing">
<div id="lines"></div>
</div>
更新
OP 不想要 SVG 元素,she/he 想要在 canvas 上画线。我已经从 HTML 中删除了所有 d3 人员的 SVG 样式和无用的部分。在 her/his 代码中,我只使用函数 lineData(),它创建用于绘制线条的随机数据。
单击和调整大小时绘制线条。
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let ww = (canvas.width = window.innerWidth);
let wh = (canvas.height = window.innerHeight);
let rid = null;
let length = 0;
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
//var id = 1;
//var ww = window.innerWidth; // Width of the window viewing area
//var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) {
// 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
//id: id, // For identification and debugging
x1: x1,
y1: y1,
//x2: x1 + 50, // Move 100 to the right
//y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 2 * Math.PI) // Pick a random angle between 0 and 360
});
//id++;
}
return data;
}
let linedata = lineData();
//console.log(linedata)
function drawLine(l) {
ctx.save();
ctx.rotate(l.rotate);
ctx.translate(l.x1, l.y1);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, length);
ctx.stroke();
ctx.restore();
}
function Draw() {
rid = requestAnimationFrame(Draw);
length++;
if (length <= 50) {
ctx.clearRect(0, 0, ww, wh);
linedata.map(l => {
drawLine(l);
});
} else {
if (rid) {
cancelAnimationFrame(rid);
rid = null;
}
}
}
function Init() {
if (rid) {
cancelAnimationFrame(rid);
rid = null;
}
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
length = 0;
linedata = lineData();
Draw();
}
canvas.addEventListener("click", Init, false);
window.setTimeout(function() {
window.addEventListener("resize", Init, false);
}, 15);
canvas{background:#d9d9d9;}
<canvas id='canvas'></canvas>
我已经在 html5 中将下面的代码写到 运行 但它似乎不起作用。当用户点击 canvas 时,下面的代码应该是 运行。我似乎无法确定这里的问题是什么。据我所知,其他一切似乎都是正确的:
var ctr = document.getElementById("canvas").getContext("2d");
function sol86() {
var ctx = d3.select('#lines')
.append('ctx')
.attr("width", "100%")
.attr("height", "100%");
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
var id = 1;
var ww = window.innerWidth; // Width of the window viewing area
var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) { // 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
id: id, // For identification and debugging
x1: x1,
y1: y1,
x2: x1 + 50, // Move 100 to the right
y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
})
id++;
}
return data;
}
var lineData = lineData();
console.log(lineData);
var line = ctx.selectAll("line")
.data(lineData)
.enter().append('line')
.attr("id", function(d) {
return d.id;
})
.attr("x1", function(d) {
return d.x1;
})
.attr("y1", function(d) {
return d.y1;
})
.attr("transform", function(d) {
return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
})
.attr("x2", function(d) {
return d.x1;
})
.attr("y2", function(d) {
return d.y1;
}).transition().delay(function(d, i) {
return 1.5 * i;
}).duration(750)
.attr("x2", function(d) {
return d.x2;
})
.attr("y2", function(d) {
return d.y2;
});
}
// run on load
$(document).ready(function(event) {
$(window).on("click", function(event) {
d3.selectAll("ctr").remove();
sol86();
});
});
$(window).resize(function() {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
d3.selectAll("ctr").remove();
sol86();
});
body {
margin: 0;
}
.drawing {
margin: 0;
}
#lines {
width: 100%;
height: 100%;
}
line {
stroke: #111;
stroke-width: 1;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='1000'></canvas>
<div class="drawing">
<div id="lines"></div>
</div>
这里有人能帮我解决这个问题吗?
您正在创建奇怪的 <ctx>
标签而不是 <svg>
标签。我已经改变了。 canvas 有一个背景,这样我就可以看到它并单击它。我也把它变小了。希望对你有帮助。
var ctr = document.getElementById("canvas").getContext("2d");
function sol86() {
var ctx = d3.select('#lines')
.append('svg')
.attr("width", "100%")
.attr("height", "100%");
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
var id = 1;
var ww = window.innerWidth; // Width of the window viewing area
var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) { // 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
id: id, // For identification and debugging
x1: x1,
y1: y1,
x2: x1 + 50, // Move 100 to the right
y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 360) // Pick a random angle between 0 and 360
})
id++;
}
return data;
}
var lineData = lineData();
//console.log(lineData);
var line = ctx.selectAll("line")
.data(lineData)
.enter().append('line')
.attr("id", function(d) {
return d.id;
})
.attr("x1", function(d) {
return d.x1;
})
.attr("y1", function(d) {
return d.y1;
})
.attr("transform", function(d) {
return "rotate(" + d.rotate + " " + (d.x1 + 25) + " " + (d.y1 + 25) + ")";
})
.attr("x2", function(d) {
return d.x1;
})
.attr("y2", function(d) {
return d.y1;
}).transition().delay(function(d, i) {
return 1.5 * i;
}).duration(750)
.attr("x2", function(d) {
return d.x2;
})
.attr("y2", function(d) {
return d.y2;
});
}
// run on load
$(document).ready(function(event) {
$(window).on("click", function(event) {
d3.selectAll("ctr").remove();
sol86();
});
});
$(window).resize(function() {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//resize on resizeEnd function
$(window).bind('resizeEnd', function() {
d3.selectAll("ctr").remove();
sol86();
});
body {
margin: 0;
}
.drawing {
margin: 0;
}
#lines {
width: 100%;
height: 100%;
}
line {
stroke: #111;
stroke-width: 1;
}
canvas{background:#d9d9d9;}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<canvas id='canvas' width='1000' height='50%'></canvas>
<div class="drawing">
<div id="lines"></div>
</div>
更新
OP 不想要 SVG 元素,she/he 想要在 canvas 上画线。我已经从 HTML 中删除了所有 d3 人员的 SVG 样式和无用的部分。在 her/his 代码中,我只使用函数 lineData(),它创建用于绘制线条的随机数据。 单击和调整大小时绘制线条。
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let ww = (canvas.width = window.innerWidth);
let wh = (canvas.height = window.innerHeight);
let rid = null;
let length = 0;
function lineData() {
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
var data = new Array();
//var id = 1;
//var ww = window.innerWidth; // Width of the window viewing area
//var wh = window.innerHeight; // Height of the window viewing area
// iterate for cells/columns inside rows
for (var line = 0; line < 1000; line++) {
// 1000 lines
var x1 = getRandomArbitrary(-50, ww); // initial points can start 100px off the screen to make even distribution work
var y1 = getRandomArbitrary(-50, wh);
data.push({
//id: id, // For identification and debugging
x1: x1,
y1: y1,
//x2: x1 + 50, // Move 100 to the right
//y2: y1 + 50, // Move 100 up
rotate: getRandomArbitrary(0, 2 * Math.PI) // Pick a random angle between 0 and 360
});
//id++;
}
return data;
}
let linedata = lineData();
//console.log(linedata)
function drawLine(l) {
ctx.save();
ctx.rotate(l.rotate);
ctx.translate(l.x1, l.y1);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(length, length);
ctx.stroke();
ctx.restore();
}
function Draw() {
rid = requestAnimationFrame(Draw);
length++;
if (length <= 50) {
ctx.clearRect(0, 0, ww, wh);
linedata.map(l => {
drawLine(l);
});
} else {
if (rid) {
cancelAnimationFrame(rid);
rid = null;
}
}
}
function Init() {
if (rid) {
cancelAnimationFrame(rid);
rid = null;
}
ww = canvas.width = window.innerWidth;
wh = canvas.height = window.innerHeight;
length = 0;
linedata = lineData();
Draw();
}
canvas.addEventListener("click", Init, false);
window.setTimeout(function() {
window.addEventListener("resize", Init, false);
}, 15);
canvas{background:#d9d9d9;}
<canvas id='canvas'></canvas>