How To Draw Dotted Lines On Chalkboard
1, the difference betwixt the width and elevation properties of Canvas and the divergence between Width and Height in Style
Canvas is a new drawing tool for HTML5. After creating a canvas with the Sail tag, it has three bones elements: ID, width, and height.
Special attention is that the width and pinnacle of Canvas cannot exist set in Mode, because the width and pinnacle of the DIV is fix, sail uses the default width (300px), tiptop (150px).
<canvas id = "canvas" width = "200px" elevation = "200px" style = " border : #138eee solid 1px; " > 
If you set a wide and loftier in Mode, printing the width and height of Sheet, y'all volition get the default value.
<canvas id = "canvass" style = " width : 500px; height :500px; border : #138eee solid 1px; " > </canvas > allow canvasEle = document. getElementById ( 'canvass' ) console. log (canvasEle.width) // 300 panel. log (canvasEle.pinnacle) // 150 2, depict straight line
The Canvas sheet uses the W3C coordinate system, which is different from the mathematical coordinate system nosotros usually used. It is mainly the positive direction of the Y axis.
With GetContext ('2d'), y'all can get the context of the sheet (assuming to ctx), information technology has
moveTo(x1, y1)Indicates to move the castor to this point
lineTo(x2, y2): Represents brush painting (x2, y2) point
stroke(): Indicates that the castor begins to draw graphics
For case: drawing a direct line from (50, fifty) to (100, 100)
let canvasEle = document. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( '2d' ) ctx. moveTo ( 50 , 50 ) ctx. lineTo ( 100 , 100 ) ctx. stroke ( ) 
3, draw a folding line
The fold line consists of a plurality of lines, and so a fold line can be drawn direct co-ordinate to the method of drawing a straight line.
For instance: (50, 50) -> (100, 100) -> (100, 150) -> (150, 200)
let canvasEle = certificate. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( '2d' ) ctx. moveTo ( 50 , 50 ) ctx. lineTo ( 100 , 100 ) ctx. lineTo ( 100 , 150 ) ctx. lineTo ( 150 , 200 ) ctx. stroke ( ) 
4, draw a rectangle
Drawing rectangles can as well be like drawing straight lines and lines, using MoveTo and LineTo methods, but the official website has packaged straight drawing rectangular methods, Strokerect, FillRect, Rect methods.
4.1 Draw a stroke rectangle
Stroke rectangle: Do not fill the color, the border can set the color.
Main useStrokeStyle aspect and strokerect () method
- StrokeStyle: You lot can set the color of the brush, receive the color value of the sixteen, RGB value, RGBA value, etc.
- Strokerect (x, y, width, superlative): where x, y is referring to the upper left corner coordinate of the rectangle, Width is the width of the rectangle, Height is a high rectangle
<! DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-eight" > <title > Draw a rectangle </title > </head > <body > <sail id = "canvas" width = "200px" height = "200px" style = " border : #138eee solid 1px; " > </sheet > <script > let canvasEle = certificate. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( '2d' ) ctx.strokeStyle = 'hotPink' ctx. strokeRect ( 50 , 50 , 100 , 100 ) ctx. stroke ( ) </script > </body > </html > 
4.ii Draw a filling rectangle
Make full rectangle: Fill the color of the rectangle.
Main useFillStyle Attributes and FillRect () Methods
- FillStyle: You can set the color of the castor, receive 16-based color value, RGB value, RGBA value, etc.
- FillRect (10, y, width, summit): where x, y refers to the upper left corner coordinate of the rectangle, Width is a wide rectangle, and Elevation is a high rectangle.
<! DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-eight" > <championship > Draw a rectangle </title > </caput > <body > <canvas id = "canvas" width = "200px" height = "200px" style = " border : #138eee solid 1px; " > </canvas > <script > permit canvasEle = document. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( 'second' ) ctx.fillStyle = 'bluish' ctx. fillRect ( 50 , fifty , 100 , 100 ) </script > </body > </html > 
iv.3 Stroke Rectangle + Pack Rectangle
<! DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <championship > Draw a rectangle </title > </head > <body > <canvas id = "canvas" width = "200px" height = "200px" mode = " border : #138eee solid 1px; " > </sheet > <script > let canvasEle = document. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( '2d' ) ctx.strokeStyle = 'cherry' ctx. strokeRect ( 50 , l , 100 , 100 ) ctx.fillStyle = 'blue' ctx. fillRect ( 50 , l , 100 , 100 ) </script > </body > </html > 
v, draw polygon
Describe polygons using additional API
- CTX.BeginPath (): Start a new path
- CTX.Closepath (): Close path
<! DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <title > Draw a rectangle </championship > </caput > <body > <canvas id = "canvas" width = "200px" height = "200px" style = " border : #138eee solid 1px; " > </canvass > <script > let canvasEle = document. getElementById ( 'canvas' ) let ctx = canvasEle. getContext ( 'second' ) ctx. beginPath ( ) ctx. lineTo ( l , 50 ) ctx. lineTo ( 100 , 25 ) ctx. lineTo ( 200 , 60 ) ctx. lineTo ( 150 , 100 ) ctx. lineTo ( 200 , 200 ) ctx. closePath ( ) ctx.strokeStyle = 'pink' ctx. stroke ( ) </script > </body > </html > 
Source: https://programmersought.com/article/999510500439/
Posted by: crowderdinduch.blogspot.com
0 Response to "How To Draw Dotted Lines On Chalkboard"
Post a Comment