我們先來看一個示例

代碼如下

 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d  context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); /script  /head  body onload= draw() >
說明：
 function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d  context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); }
分析
上述的這個JavaScript代碼是繪制代碼，使用document.getElementById（）方法獲取Canvas上下文，并調用Canvas對象上的getContext（）方法以獲取Canvas上下文，調用上下文的beginPath（）方法來開始路徑，使用moveTo（）將筆移動到指定位置，并將線條繪制到lineTo（）方法指定的位置，通過調用stroke（）方法執行繪圖。
運行結果
執行上述HTML文件，將會顯示如下效果
接著我們再來看一個示例
代碼如下
 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title /title  meta charset= utf-8 /  script type= text/javascript  function draw() { var canvas = document.getElementById( SimpleCanvas  if ( ! canvas || ! canvas.getContext ) { return false; var context = canvas.getContext( 2d  context.beginPath(); context.moveTo(120, 60); context.lineTo(240, 90); context.stroke(); context.beginPath(); context.moveTo(120, 75); context.lineTo(260, 120); context.stroke(); context.beginPath(); context.moveTo(160, 100); context.lineTo(200, 140); context.lineWidth = 3  context.stroke(); context.beginPath(); context.moveTo(200, 40); context.lineTo(360, 120); context.strokeStyle = #00C080  context.stroke(); context.beginPath(); context.moveTo(40, 20); context.lineTo(80, 160); context.strokeStyle = #C00080  context.lineWidth = 1  context.stroke(); context.beginPath(); context.moveTo(400, 10); context.lineTo(380, 200); context.strokeStyle = rgb(96, 96, 225)  context.stroke(); /script  /head  body onload= draw() >
說明：
在上面的代碼中，我們改變了線條的粗細和顏色。
要更改線條的粗細，請在Canvas的Context的lineWidth屬性中設置線條的粗細；要更改線條顏色，請在Context的strokeStyle屬性中指定繪圖顏色。對于顏色規范，可以使用諸如十六進制格式，“RGB”格式，“blue”，“red”等顏色名稱；此外，只要設置了一次值，即使使用beginPath（）創建新路徑，也不會初始化設置的值。
例
 context.beginPath(); context.moveTo(160, 100); context.lineTo(200, 140); context.lineWidth = 3  context.stroke(); context.beginPath(); context.moveTo(200, 40); context.lineTo(360, 120); context.strokeStyle = #00C080  context.stroke();
上述代碼的情況下，由于第二條線沒有指定lineWidth，因此可以利用之前指定的lineWidth的值。
運行結果
以上就是如何使用HTML5 canvas繪制線條的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。