Canvas_html5 チュートリアル スキルを使用する際の注意点まとめ

1. Canvas 中国語チュートリアル https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. Canvas のデフォルトの幅と高さは 300 と 150 です。例外を避けるには、次のようにするのが最善です。 css を使用せずに幅と高さを追加します

3. Canvas タグをサポートしていないブラウザ用の命令を Canvas タグ内に追加します

4.ブラウザは次の JS コードを通じてキャンバスをサポートします

コードをコピー

コードは次のとおりです:

var Canvas = document.getElementById('tutorial ');
if (canvas.getContext){
var ctx = Canvas.getContext('2d'); // ここにコードを描画します
} else {
// ここでキャンバスがサポートされていないコード
}

5. Canvas は 1 つの基本形状、つまり長方形の描画のみをサポートしますが、他のグラフィックも描画できます。 Canvas path

6. 四角形の描画には、rect、fillRect、strokingRect、clearRect の 4 つの関数があります。

7. beginPath は、新しいパスレイヤーを開始するために使用されます。追加されていない場合は、上に描画することを意味します。元のパス層 次の 2 つのコードの効果は完全に異なります。最初のコードには 2 本の赤い線が表示され、2 番目のコードには 1 本の黒い線と 1 本の赤い線が表示されます。

コードをコピーしますコードは次のとおりです。

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(200.5,20.5);
ctx.moveTo(100.5) ,40.5);
ctx.lineTo(200.5,40.5)
ctx.ストロークスタイル = '#f00';

コードをコピーします

コードは次のとおりです: var ctx = document.getElementById('cvs').getContext( '2d');

ctx.moveTo(100.5,20.5); ctx.beginPath();

ctx.moveTo(100.5,40.5);

ctx.ストロークスタイル = '#f00';


8. If you don’t need to close the path, you don’t need to use closePath. If you use fill, the path will be closed automatically. There is no need to use closePath anymore.

9. As long as you have enough patience, you can use it. The Searle curve can be used to draw any graphics

10. There is a bug in the quadratic curve under Firefox, so the cubic curve can be used instead of the quadratic curve

11. Images (such as PNG, GIF, JPEG, etc.) can be introduced into canvas, and other canvas elements can also be used as the source of images

12. The following is the basic canvas image drawing code, where image is an image or canvas object, x and y is its starting coordinate in the target canvas

drawImage(image, x, y)
The following code represents scaling the image, width and height represent the zoomed size
drawImage(image, x , y, width, height)
The following piece of code represents cutting an image. The first parameter is the same as the others, both are references to an image or another canvas. The other eight parameters respectively represent the starting x coordinate of cropping in the picture, the starting y coordinate of cropping in the picture, the width of the cropping area, the height of the cropping area, the x coordinate of the drawn position, the y coordinate of the drawn position, and the width of the drawn graphic. The height of the drawn graphics and the size of the cropping area can be different from the size of the drawn graphics. In this case, it will be scaled to the size of the drawn picture

drawImage(image, sx, sy, sWidth, sHeight, dx , dy, dWidth, dHeight)
13. strokeStyle is used to set the color of the graphic outline, and fillStyle is used to set the fill color. color can be a string representing a CSS color value, a gradient object, or a pattern object. By default, the line and fill colors are black (CSS color value #000000).

14. Image transparency can be represented by globalAlpha = transparency value or rgba color value

15. The lineWidth attribute sets the thickness of the current drawn line. In order to solve the 1px line width bug problem, 0.5 is used Ways to solve

16. The leftmost line of the lineCap attribute uses the default button. Notice that it is flush with the guide line. The middle one is the round effect, with a semicircle with a radius of half the line width added to the endpoint. The one on the right is the effect of square, with a square of equal width and half the line width added to the endpoint

17. LineJoin attribute Here I also use three polylines as an example, and set different lineJoin values ​​respectively. The top one is the effect of round, the corners are rounded, and the radius of the circle is equal to the line width. The middle and bottom lines are the effects of bevel and miter respectively. When the value is miter, the line segment will extend outside the connection until it intersects at a point. The extension effect is restricted by the miterLimit attribute to be introduced below

18. The save and restore methods are used to save and restore the canvas state. , all have no parameters. The state of the Canvas is a snapshot of all styles and transformations applied to the current screen. Canvas state is saved in a stack. Every time the save method is called, the current state will be pushed into the stack and saved. Each time the restore method is called, the last saved state is popped from the heap and all settings are restored.

19. The transform(1, 0, 0, 1, 0, 0) parameters respectively represent horizontal scaling, horizontal rotation (clockwise), vertical rotation (counterclockwise), vertical scaling, horizontal Directional offset, vertical offset
　setTransform(1, 0, 0, 1, 0, 0) means to reset the previous transformation matrix and then construct a new matrix. The parameter function is the same as above
rotate(angle) , (a radius is equal to 1 radian, 2πr/r=radians, that is, 360=2π, that is, 1=π/180)

20. The animation is actually to continuously clear the drawing board (clearRect()) and then redraw it