Html5 new feature: use canvas tag to draw multiple straight lines with screenshots of the effect

The following example uses the canvas tag to draw multiple straight lines

Copy the code The code is as follows: index_three Your browser does not support the canvas tag. //Get the Canvas object (canvas) var canvas = document.getElementById("myCanvas"); //Simply detect whether the current browser supports the Canvas object to avoid prompting syntax errors in some browsers that do not support HTML5 if(canvas.getContext){ //Get the corresponding CanvasRenderingContext2D object (brush ) var ctx = canvas.getContext("2d"); //The color of the line ctx.strokeStyle="#FF9933"; //The width of the line in pixels ctx. lineWidth=10; //The two-level shape of the line ctx.lineCap="round"; //Note that the coordinate system of Canvas is: the upper left corner of the Canvas canvas is the origin (0,0) , the horizontal coordinate is to the right, the vertical coordinate is to the downward direction, and the unit is pixels (px). //Start a new drawing path ctx.beginPath(); //Define the starting point coordinates of the straight line as (10,10) ctx.moveTo(50, 50); //Define the end point coordinates of the straight line as (50,10) ctx.lineTo(350, 250); ctx.moveTo(50, 240); ctx.lineTo(360, 60); ctx.moveTo(50, 200); ctx.lineTo(300, 40); //Draw a straight line along the path of coordinate point order ctx.stroke(); //Close the current drawing path ctx.closePath(); }