Common drawing techniques in Canvas in HTML5

In H5 we will often use the canvas element to draw graphics. So today we will introduce how to use canvas and under what circumstances canvas can be used. And canvas painting skills

canvas is used to draw graphics on the page

canvas overview:

html5 canvas element is used in conjunction with javascript Draw graphics on the page

Canvas is a canvas, draw paths, rectangles, circles on the canvas...

Create canvas

height>

canvas drawing graphics: ---》javascript drawing

Canvas itself does not have the drawing ability, drawing work All are done in javascript*****

js to get the element

element.getContext("2d") html5's built-in object, which can be used to draw 2d graphics. Methods for drawing rectangles, paths, circular characters, etc.

cxt.fillStyle = "#ff0000"; //Draw fill color

cxt.fillRect(25,10,150,75);//x, y,w,h determine the shape 25,10 starting point coordinates

Note: canvas is not supported

Your browser does not support canvas

Drawing straight lines and rectangles

Line lines:

cxt.moveTo(10,10); Original starting point

cxt.lineTo(150,50); The end point of the original starting point is the starting point of the next straight line of the same 2D graphic

cxt.stroke(); Output

##Rectangle:

cxt.strokeStyle = "#ff0000"; Rectangle border color

cxt. strokeRect(10,10, 50, 50); Draw rectangle coordinates

cxt.fillStyle = "#ff0000";Fill color

cxt.fillRect(10,10,150,150);Fill position

Draw a circle:

1》 Html5 Degree of circle

2》 Draw a circle

cxt.arc(x, y,radius,startAngle,endAngle, other parameters (true counterclockwise false clockwise))

x,y starting point

radius radius

startAngle starting point degree

endAngle End point degree

Drawing triangle

BeginPath() BeginPath() BeginPath() Drawing path

Clear canvas element:

Cxt. clearRect(x,y,width,height) Clears the canvas elements within the (x,y) width and height range

Save and restore the

state of canvas

Cxt.save() saves the state

Cxt.restore() restores the saved state, including border and fill color

Move coordinates Space:

Translate: Canvas dot movement

Translate(150,150)

Original 0,0 ---》150,150

The above is This is an overview of the canvas element. I believe everyone should have understood it after saying so much. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the

tag of html

##How to write the html document type declaration

HTML drop-down menu code

The above is the detailed content of Common drawing techniques in Canvas in HTML5. For more information, please follow other related articles on the PHP Chinese website!