How to Draw Line Over Text in Html
In this tutorial we are going to review how to draw a line, change line widths, change line color, join two lines, define a line cap, etc. If you are not familiar with the HTML5 canvas and its 2d context please review the beginners tutorial - HTML5 canvas tutorial for beginners
CANVAS 2d context methods and attributes that are used in this tutorial
- beginPath()
- The beginPath method clears the current path and specifies the beginning of a new path
- moveTo(x,y)
- The moveTo method moves the path to the specified point(x,y) in the canvas, without creating a line
- lineTo(x,y)
- The lineTo method creates a line from the path's current point to the specified point(x,y) in the canvas
- stroke()
- The stroke method paints the current path, with the color set by the strokeStyle attribute, black is default
- strokeStyle
- color of the drawing, black is default.
- lineWidth
- width of the drawing stroke, 1 is default.
- lineCap
- style of the line ending, butt is default. Available choices are butt, round and square.
- lineJoin
- style of the line corner, miter is default. Available choices are miter, bevel and round.
Lets draw simple line using canvas from one point to another.
HTML source code for the above example - myCanvas.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>HTML5 canvas Line Tutorial</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <style type="text/css"> body { margin: 10px 10px 10px 10px; } </style> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body> <b>HTML5 canvas draw a line tutorial</b> <br></br> <canvas id="myCanvas" width="400" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML 5 canvas element! </canvas> </body> </html> JavaScript source code - app.js
Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'HTML5Canvas', appFolder: 'app', launch: function() { var myCanvasElement = document.getElementById("myCanvas"); var context = myCanvasElement.getContext("2d"); context.beginPath(); context.moveTo(50,50); context.lineTo(300,50); context.stroke(); context.beginPath(); context.moveTo(50,60); context.lineTo(300,150); context.stroke(); } }); Above we have created a canvas element and then with the help of the 2d context we have drawn a line from point A to point B. Next let's change the line width.
Source for canvas line width
context.beginPath(); context.moveTo(50,50); context.lineTo(300,50); context.lineWidth = 5; context.stroke();
How to change the line color
Source for canvas line color
context.beginPath(); context.moveTo(50,50); context.lineTo(300,50); context.lineWidth = 5; context.strokeStyle="Orange"; context.stroke(); context.beginPath(); context.moveTo(50,70); context.lineTo(300,150); context.lineWidth = 5; context.strokeStyle="#FF0000"; context.stroke();
How to specify line Cap
If you don't specify a line cap style the default attribute is "butt". if you specify a "round" or "square" cap style, the length of the line will increase by an amount equal to the width of the line. For example, if the line width is 20 then it will add 10 on each side as you can see on the image below.
Source for canvas line Cap styles
context.beginPath(); context.moveTo(50,50); context.lineTo(300,50); context.lineWidth = 20; context.lineCap = "butt"; context.stroke(); context.beginPath(); context.moveTo(50,80); context.lineTo(300,80); context.lineWidth = 20; context.lineCap = "round"; context.stroke(); context.beginPath(); context.moveTo(50,110); context.lineTo(300,110); context.lineWidth = 20; context.lineCap = "square"; context.stroke();
How to join two lines
Default is a miter joint. Two other types of join are round and bevel.
Source for canvas line join types
//just to show the top level context.beginPath(); context.moveTo(10,40); context.lineTo(480,40); context.stroke(); //just to show the bottom level context.beginPath(); context.moveTo(10,180); context.lineTo(480,180); context.stroke(); context.beginPath(); context.moveTo(40,180); context.lineTo(40,40); context.lineTo(140,180); context.lineWidth = 20; context.lineJoin = "miter"; context.stroke(); context.beginPath(); context.moveTo(180,180); context.lineTo(180,40); context.lineTo(280,180); context.lineWidth = 20; context.lineJoin = "round"; context.stroke(); context.beginPath(); context.moveTo(320,180); context.lineTo(320,40); context.lineTo(420,180); context.lineWidth = 20; context.lineJoin = "bevel"; context.stroke();
How to Draw Line Over Text in Html
Source: https://www.mysamplecode.com/2012/04/html5-canvas-draw-line-tutorial.html
0 Response to "How to Draw Line Over Text in Html"
إرسال تعليق