search

Home  >  Article  >  Web Front-end  >  The use of Canvas in html5-drawing lines and surfaces

The use of Canvas in html5-drawing lines and surfaces

零下一度
零下一度Original
2017-05-06 11:51:362036browse

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

1.Canvas in Html

<!doctype html>
<html lang="en">
 <head>
  <title>Canvas 2D画线和面</title>
 </head>
 <body>
  <canvas id="cv" width="150" height="150"></canvas>
 </body>
</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(&#39;cv&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
兼容性检查在不支持 <canvas> 标签的浏览器中如何展示替换内容。通过简单的测试getContext()方法的存在，脚本可以检查编程支持性。上面的代码片段现在变成了这个样子：
var canvas = document.getElementById(&#39;tutorial&#39;);
if (canvas.getContext){
  var ctx = canvas.getContext(&#39;2d&#39;);
  // 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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Share an example code for realizing the free fall of cannonballs using HTML5Next article：Share an example code for realizing the free fall of cannonballs using HTML5

Related articles

See more