为什么我的线没有绘制到 canvas？

Question

作为的跟进，我在绘制实际 canvas 时遇到问题。如果我将每个 JSON 对象项回显到控制台，它 returns 与该项目关联的值并且我没有收到任何错误所以我知道，根据我之前的问题，我正在成功阅读JSON 文件。那么，为什么 canvas 没有任何内容？

JS

$(document).ready(function(){
    var canvas = document.getElementById("schematic_holder");
    var ctx = canvas.getContext("2d");

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "js/app/json/nst.json",
        success: function(result){
            var x1 = result[0].line.x1;
            var y1 = result[0].line.y1;
            var x2 = result[0].line.x2;
            var y2 = result[0].line.x2;
            var width = result[0].line.width;
            var stroke = result[0].line.stroke;
            console.log(x2);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineWidth = width;
            ctx.strokeStyle = stroke;
            ctx.stroke();
        },
        complete: function(){
            console.log("Complete!");
        }
    })
})

JSON

[{
    "line": {
        "width": 3,
        "stroke": "#000000",
        "x1": 640.386,
        "y1": 258.163,
        "x2": 816.364,
        "y2": 258.163
    }   
}]

Answer 1

我创建了一个简单的文本案例，看起来你没有做错什么

http://jsfiddle.net/zoak2dm5/

canvas.width = canvas.height = 1000;

我猜你的 canvas 太小或者根本看不见。

为什么我的线没有绘制到 canvas？

Why is my line not drawing to the canvas?

html

javascript

jquery

json

canvas