Table of Contents

1.Canvas in Html

2. Rendering context

3. Draw a square

4. Draw a line

Home

Web Front-end

H5 Tutorial

The use of Canvas in html5-drawing lines and surfaces

零下一度

May 06, 2017 am 11:51 AM

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>

Copy after login

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

var canvas = document.getElementById(&#39;cv&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);

Copy after login

兼容性检查在不支持 <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
}

Copy after login

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);

Copy after login

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();

Copy after login

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 of this Website

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