?

window.onload=function(){

? ? ? ? ? ? var canvas=document.getElementById("canvas");

? ? ? ? ? ? //寬高

? ? ? ? ? ? canvas.width=800;

? ? ? ? ? ? canvas.height=800;

? ? ? ? ? ? var context=canvas.getContext("2d");

context.lineWidth=10;//直線寬度

? ? ? ? ? ? //context.beginPath()；

? ? ? ? ? ? context.moveTo(100,200);//直線起點

? ? ? ? ? ? context.lineTo(300,400);//直線終點

? ? ? ? ? ? context.lineTo(100,600);//直線終點

? ? ? ? ? ? context.strokeStyle="red";//繪制直線的顏色

? ? ? ? ? ? context.stroke();//繪制

? ? ? ? ? ? context.beginPath()；

? ? ? ? ? ? context.moveTo(300,200);//直線起點

? ? ? ? ? ? context.lineTo(500,400);//直線終點

? ? ? ? ? ? context.lineTo(300,600);//直線終點

? ? ? ? ? ? context.strokeStyle="green";//繪制直線的顏色

? ? ? ? ? ? context.stroke();//繪制

? ? ? ? ? ? context.beginPath()；

? ? ? ? ? ? context.moveTo(500,200);//直線起點

? ? ? ? ? ? context.lineTo(700,400);//直線終點

? ? ? ? ? ? context.lineTo(500,600);//直線終點

? ? ? ? ? ? context.strokeStyle="#058";//繪制直線的顏色

? ? ? ? ? ? context.stroke();//繪制