Canvas draws rectangle

Drawing a rectangle context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x: The abscissa coordinate of the starting point of the rectangle (the origin of the coordinates is the upper left corner of the canvas, which is of course accurate , it is the original origin. You will understand it when you write about the deformation later. It doesn’t matter for now)

y: The ordinate of the starting point of the rectangle

width: the length of the rectangle

height: Rectangle height

• Create HTML page, set canvas label

• Write js, get canvas dom object

• Get the context through the Dom object of the canvas tag

• Set the drawing style and color

• Draw a rectangle, or fill the rectangle

     
   
请使用支持HTML5的浏览器查看本实例