We know that canvas is a canvas. Today we will draw lines and surfaces on the canvas.

1.Canvas in Html

canvas is an element in HTML5. When the width and height are not set, the canvas will initialize the width and height to 300 pixels. is 150 pixels. The element can be sized using CSS; if the image stretches to fit its frame dimensions when drawn, the CSS dimensions will be inconsistent with the proportions of the initial canvas and distortion will occur.

2. Rendering context

The canvas is initially blank. To demonstrate, first the script needs to find the rendering context and then draw on it. The 5ba626b379994d53f7acf72a64f9b697 element has a method called getContext(), which is used to obtain the rendering context and its drawing function. getContext() has only one parameter, the format of the context. For 2D images you can use CanvasRenderingContext2D.

var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');

兼容性检查在不支持  标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

3. Draw a square

Getting the context is like getting a brush. At this time, we draw a square on the canvas:

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);

CanvasRenderingContext2D.fillRect() is the Canvas 2D API method for drawing filled rectangles. The starting point of the rectangle is at the (x, y) position. The dimensions of the rectangle are width and height. The fillStyle property determines the style of the rectangle.

4. Draw a line

Similarly, drawing a line is also a method of calling ctx:

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100, 100);
ctx.stroke();

CanvasRenderingContext2D.stroke() is the Canvas 2D API using non-zero wrapping rules , a method to draw the current or existing path according to the current line drawing style.
In the above code, we first draw a path, and then render the path using the current style through the stroke method.

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of The use of Canvas in html5-drawing lines and surfaces. For more information, please follow other related articles on the PHP Chinese website!