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

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