Question

我有以下代码来绘制一条线，但它不会绘制。我只看到画布边框。我没有在控制台中看到任何错误。

的index.html：

<div id="chart_area">
     <canvas id="chart1" width="800" height="600"></canvas>
</div>
...
<script>
     processChart()
</script>

的style.css：

#chart_area
 {
 text-align:center;
 color:red;

 } 

 #chart1
 {
 text-align:center;
 border:solid;
 color:blue;

 } 

#control_panel
 {
 text-align:center;
 color:red;
 float:right;
 clear:both;
 }

chart.js之：

function processChart() {
        var b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo([0,0]);
            b_context.lineTo([300,300]);
            b_context.stroke()  
}

Answer 1

这些函数有两个参数，而不是数组。另外一定要在绘制路径之前调用beginPath，如果你不这样做，你会感到困惑:)你的代码应该是

b_context.beginPath();
b_context.moveTo(0, 0);
b_context.lineTo(300, 300);
b_context.stroke()

一些画布教程：

MDN总是很好。
This one看起来不错，专注于路径绘图。

Answer 2

你应该删除你的'[' 试试这个：

b_canvas = document.getElementById("chart1");
        var b_context = b_canvas.getContext("2d");
            b_context.moveTo(11,0);
            b_context.lineTo(200,300);
            b_context.stroke();

HTML画布不会绘制线条

2 个答案: