HTML画布不会画线

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

这些功能需要两个参数，而不是阵列。

• MDN是一件好事：此外，一定要调用beginPath方法吸引路径之前，你会得到以后，如果你不:)你的代码应该是

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

  一些帆布教程混淆。

• This one from html5tutorial.info看起来不错，专注于路径绘图。

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();