当前位置：网站首页>Canvas drawing -- how to place the drawing in the center of the canvas

Canvas drawing -- how to place the drawing in the center of the canvas

2022-06-11 03:23:00 【~ climber ~】

Case study ： Use canvas Draw a red square in the page

1、 Insert canvas Elements 

<body>
    <canvas width="512" height="512"></canvas>
</body>

What to pay attention to ：canvas Elemental width and height It refers to the width and height of the canvas , This property is Canvas width and height . and css The width and height of the attribute , It's a response canvas The size rendered on the page , namely Style width height .

2、canvas The coordinate system of

3、 Use canvas Draw Geometry 

//  obtain camvas Context 
const canvas = document.querySelector('canvas');
//  obtain 2d Context 
const context = canvas.getContext('2d');
// Draw at the center of the canvas 100*100 The square of , Because the coordinate system in the upper left corner is (0,0), The lower right corner is canvas Canvas coordinates of ,
//（canvas.width,canvas.hegiht ）, So the coordinates of the center point are （context.rect(0.5*canvas.width, // 0.5*canvas.hegiht, 100, 100）

const rectSize = [100, 100];
context.fillStyle = 'red';
context.beginPath();
context.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize);
context.fill();

The effect is as follows ：

You can see , The small square is not in the center of the canvas , as a result of , When setting coordinate points , The parameter x and y Set to half the width and height of the canvas . and rect The directive x、y Value , It means , The coordinates of the upper left corner of the rectangle to be drawn instead of the coordinates of the center point . Solution ;

Method 1 ： Recalculate rect Of x、y Parameters , Equal to half of the width and height of the canvas minus half of the width and height of the rectangle itself , The code is as follows ：


context.rect(0.5 * (canvas.width - rectSize[0]), 0.5 * (canvas.height - rectSize[1]), ...rectSize);

Method 2 ： Set the translation change for the canvas , In the process of drawing , The code is as follows ：


context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);

Compare the two methods ：

The first method ： It's easy to operate , Easy to understand , disadvantages ： If it's an irregular shape , It's going to be a lot of trouble

The second method ： Yes canvas The whole canvas is panned , such , Just get the offset between the center point and the upper left corner , Then set the canvas translate Just transform , There is no need to change the vertex position of the graph . however , Doing so will change the state of the canvas , Therefore, the canvas state should be restored .

How to restore the canvas , Translation in the first direction , The code is as follows ：


//  translation 
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);

...  Perform drawing 

//  recovery 
context.translate(0.5 * rectSize[0], 0.5 * rectSize[1]);

The second method ：canvas Context provides save and restore  Method , You can temporarily save and restore the state of the canvas at a certain time .save Instructions , Not only can you save the current translate state , You can also save other information , such as ,fillstyle etc. , and restore Command can restore the state command to save Previous instructions . The code is as follows ：


context.save(); //  Staging status 
//  translation 
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);

...  Perform drawing 

context.restore(); //  Restore the state

原网站

版权声明
本文为[~ climber ~]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206110306375343.html

边栏推荐

猜你喜欢

随机推荐