Home > Web Front-end > H5 Tutorial > body text

Html5 Canvas Preliminary Study Notes (1)-Draw a rectangle

黄舟
Release: 2017-02-28 15:17:18
Original
1886 people have browsed it

The

canvas element is a new feature of Html5 compared to the previous Html , this blog post will study the application of this component, especially its application in web game development. The

canvas component is similar to the previous components such as table and p, and can be run without any external plug-ins. Just use html and use 2Drendering contextAPI (2Drender context API) similar to our j2me development As long as you get this context, you can call its own method to draw. We can define a canvas

as follows:


<canvas id="canvas" width="400" height="400"> </canvas>
Copy after login
Canvas is used as a wrapper for the 2D rendering context,

2DThe rendering context is based on the "brush" of the canvas canvas. It uses a flat Cartesian coordinate system with the upper left corner as the origin (0, 0). Moving to the right, the coordinate value of x will increase. When moving downward, the value of y will increase, which is very similar to ours. j2me canvas. Okay, after introducing some basic concepts, I will build the first Html5 Canvas, first of all, the rendering is as follows

## Very simple one An example is to draw a rectangle. Let’s look at the code below:


The label of
canvas

is to define a

canvas
Canvas, but no processing is done. The part of the label

script is js The code part, the following part is to obtain the rendering context:

var canvas = document.getElementById(&#39;canvas&#39;);
var context = canvas.getContext(&#39;2d&#39;);
Copy after login
First obtain the canvas element, and then obtain the 2dRendering context.

The following code is to draw the rectangular part:

context.fillStyle = &#39;#000000&#39;;
context.fillRect(50, 50, 100, 100);
Copy after login
First set the color, and then draw. The four parameters are the horizontal and vertical coordinates of the starting point and the width and height

The above is the content of Html5 Canvas Preliminary Study Notes (1)-Drawing a Rectangle. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template