Author: Less sugar

Introduction to the

Canvas is a new addition to HTML5, an HTML element in which you can draw images using a script (usually JavaScript). It can be used for photo collections or simple (and not so simple) animations, or even real-time video processing and rendering. Canvas is a drawable area defined by HTML code with height and width attributes. JavaScript code can access this area, similar to other generic TWO-DIMENSIONAL apis, with a full set of drawing functions to dynamically generate graphics. Mozilla applications have supported Canvas since Gecko 1.8 (Firefox 1.5) and Internet Explorer since IE9. Chrome and Opera 9+ are also supported.

Historical sources

Apple internally uses its own MacOS X WebKit launch, which supplies applications that use components like dashboards and Safari browsers. Later, gecko-kernel browsers (notably Mozilla and Firefox), Opera and Chrome, and the Hypertext Web Applications Technology Working Group suggested using the element for the next generation of web technologies

Basic Use of Canvas

  1. Use of the Canvas tag

  1. The Canvas method checks support

  1. Drawing graph on canvas

Coordinate system

rectangular

FillRect (x,y, width, height) // Void stokeRect(x,y, width, height) ClearRect (x,y, width, height) // Clear the rectangle (x,y) with width and height as transparentCopy the code

The path

BeginPath () creates a new path. Once created, the drawing command will moveTo the new path. MoveTo (x, y) moves the pen to (x, Y) point starts behind the draw work closePath() closes the path and shifts the draw instruction back to the context Stroke () strokes the drawn path fill() fills the drawn closed areaCopy the code

The circular arc

arc( x , y , r , startAngle , endAngle , // Draw an anticlosewise arc from (x,y) to a circle with radius r as the center of the circlefalseThat is, clockwisetrueFor counterclockwise arcTo(x1,y1, x2, y2, radius) // Draw arcs according to two control points (x1,y1) and (x2, y2) and radius at the same time connect two control pointsCopy the code

Bessel curve

A bezier curve is actually a straight line

Quadratic Bessel curve

Cubic Bezier curves

Quadratic Bessel curve

QuadraticCurveTo (CP1x, CP1Y, x, Y) // (CP1x, CP1Y) Control point (x,y) end pointCopy the code

Cubic Bezier curves

BezierCurveTo (CP1x, CP1Y, CP2X, CP2Y,x, Y)// (CP1x, CP1Y) control point 1 (CP2X, CP2Y) control point 2 (x,y) end pointCopy the code

The style to add

FillStyle = color strokeStyle = color // Color can be a color value, gradient object (not a style ！！！！) LineWidth = value lineCap =type(Butt, round, square) The end of the line is square, round & protruding, square & protrudingCopy the code

lineJoin = type(round, bevel, miter) lines meet in the order of round, flat Angle, triangleCopy the code

Ctx.setlinedash ([actual length, gap length]) // Dotted linesetLineDash accepts the array ctx.lineDashOffet // sets the offsetCopy the code

The gradient

var gradient = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); Var gradient = CTX. CreateRadialGradient (x1,y1, R1,x2,y2, R2); AddColorStop (position, color)// position: relative position 0~1 color: the color under this positionCopy the code

transparency

ctx.globalAlpha = value (0~1)
Copy the code

The text

fillText( text , x , y , StrokeText (text,x,y,[,maxWidth]) Draw text border at (x,y) position MaxWidth (optional) font = value eg:"100px sans-serif"  
Copy the code

Draw pictures

DrawImage (image, x,y, width, height); drawImage(image, x,y, width, height); Swidth, sheight,dx,dy,dwidth,dheight) slice the first four are to define the slice position and size of the image source and the last four are the target display position size of the regular sliceCopy the code

State save recovery

save()

restore()
Copy the code

action

Translate (x,y) moves the canvas origin to (x,y) (save&restore saves the original state!!) Rotate (Angle) rotate(Angle) scale(x,y) Rotate (Angle) scale(x,y) rotate(Angle) scale(x,y) rotate(Angle) scale(x,y) scale(x,y)Copy the code

Global synthesis operation

globalCompositeOperation = type; source-over

source-in

source-out

source-atop

destination-over

destination-in

destination-out

destination-atop

xor

copy

tailoring

Clip // shows only the area inside the clipping area (use save & Restore to store the Canvas state!!)Copy the code

animation

ClearRect () clears the canvas save&Restore Saves and restores the canvas stateCopy the code

Regularly perform

  • setInterval()
  • setTimeout()
  • requestAnimationFrame()

Difference between see: www.cnblogs.com/xiaohuochai…

svg

The label

  • The rectangle the rect
  • Circular circle
  • Ellipse of the ellipse
  • Line line
  • Line polyline
  • Polygon polygon
  • Path the path
  • Text text

Details: www.runoob.com/svg/svg-ref…

attribute

  • The width of the width
  • Height the height
  • CSS style
  • Fill color fill
  • Border color stroke
  • Border width stroke-width
  • Border head and tail stroke-linecap
  • Line Style Stroke-Dasharray (Fill in the line width and the line gap in a cycle in order)
  • The initial offset of each section of the line stroke-dashoffet
  • Fill opacity fill-opacity
  • Border stroke – opacity
  • Figure filling rule fill-rule (Nonzero evenodd)
  • Action transform (The center point is the upper left corner of the image, and only 2D transformation is supported

Details: www.zhangxinxu.com/wordpress/2…

  • translate(10 ,10 ) or translate(10 10)
  • Rotate (20) or rotate(20, x y) x, where y is the rotation center and can only be the default DEG unit
  • scale(x , y)

  • ViewBox properties

Details: www.zhangxinxu.com/wordpress/2…

  • viewBox = “x , y , width , height”
  • PreserveAspectRatio attribute

Details: www.zhangxinxu.com/wordpress/2…

The rectangle the rect

  • It’s x to the left
  • Y away from the top
  • Rectangles produce rounded corners rx
  • Rectangles produce rounded corners ry

Circular circle

  • Dot cx cy
  • Radius r

Ellipse of the ellipse

  • The center of the ellipse, cx, cy
  • Horizontal radius Rx
  • Vertical radius RY

Straight line

  • The starting point is x1, y1
  • End point x2, y2

Polygon polygon

  • Points (eg:points=”200,10 250,190 160,210″)

Curve polyline

  • Define points(eg: points=”0,40 40,40 40,80 80,80 80,120 120,120 120,160″)

Path the path

  • M = moveto moves the brush
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto curve
  • S = smooth curveto
  • Quadratic Bezier curve Q = quadratic Bezier curve
  • T = smooth quadratic Bezier curveto
  • A = Octagonal ellipse
  • Z = Closepath End path

Note: The command above is capitalized for absolute positioning and lowercase for relative positioning

  • The text
<svg><text x="10" y="20" fill="red" transform="Rotate (30, 40)"></text></svg>
Copy the code

Other tags such as hyperlinks, TSPAN and textPath are not covered in detail

  • Details: www.runoob.com/svg/svg-tex…

It is recommended to use an SVG editor to generate paths. Here we use the Method Draw editor as an example

Use the tutorial website:Blog.csdn.net/q1056843325…

English online tool website:editor.method.ac/

Chinese online website:C.runoob.com/more/svgedi…

Canvas & SVG performance

Related links:

  • Blog.csdn.net/u012468376/…
  • www.w3cplus.com/canvas/grad…
  • www.runoob.com/svg/svg-tut…

The original link: tech.meicai.cn/detail/69, you can also search the small program “Mei CAI product technical team” on wechat, full of dry goods and updated every week, want to learn technology you do not miss oh.