我有一堆JSON文件,我想慢慢畫出點。我已閱讀tutorial,但這只是畫一條線。但我想要的是按順序繪製幾行(先繪製一個,然後再繪製一個)並使用不同的起點。這裏是JSON文件:畫布動畫畫線
{
"data": [
{
"line": {
"color": "#96c23b",
"points": [
{
"x": 1,
"y": 2
},
{
"x": 2,
"y": 3
},
{
"x": 4,
"y": 5
},
{
"x": 7,
"y": 8
}
],
"width": 2.0
},
"type": "line",
"line_id": "1"
},
{
"line": {
"color": "#DF5453",
"points": [
{
"x": 33,
"y": 34
},
{
"x": 34,
"y": 35
},
{
"x": 38,
"y": 39
},
{
"x": 40,
"y": 42
},
{
"x": 45,
"y": 46
}
],
"width": 5.0
},
"type": "line",
"line_id": "2"
}
]
}
繪圖的速度並不重要。
我知道如何解析JSON並在畫布上繪製沒有動畫的線條。這裏是jQuery代碼:
var points_list = {"data":[
{"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"},
{"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"}
]}
function drawLines() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
$.each(points_list.data, function (key, value) {
var info = value.line;
var color = info.color;
var width = info.width;
var points = info.points;
context.beginPath();
context.moveTo(points[0].x, points[0].y);
context.lineWidth = width;
context.strokeStyle = color;
context.fillStyle = color;
for (var p = 1; p < points.length; p++) {
context.lineTo(points[p].x, points[p].y);
}
context.stroke();
});
}
第1步:你能畫的線條沒有任何動畫?也就是說,您是否知道如何解析JSON以獲得可以在JavaScript中使用的對象,並且可以編寫一些使用數組中的數據繪製線條的代碼? – nnnnnn
對不起,我沒有說清楚。我知道如何解析JSON並在沒有動畫的情況下在畫布上繪製線條。以下是jQuery的代碼: – user6156734
代碼沒有出現在您的評論中,但無論如何,請編輯您的問題直接在問題主體中顯示相關代碼。我假設你現在有一些循環來迭代數組,在這種情況下,最簡單的變化就是使它適應一個基於'setTimeout()'的僞循環。 – nnnnnn