Simple getting started canvas, Getting Started canvas

Simple getting started canvas, Getting Started canvas

I. Preface

I have been working on front-end PC development, from the Internet to industrial software. Recently, I found that mobile terminals have become essential front-end skills and cannot stop learning. Some new things added to HTML5, canvas is a relatively complicated one. It's easy to get started and learn through a scratch effect.

 

Ii. canvas Basics

The goal of this article is to make a scratch effect, but if you do not know what canvas is, you will certainly not be able to proceed. So let's talk about the canvas basics first.

First of all, the best way to understand canvas is to regard canvas as a blank paper, a piece of paper that you can draw on.

Then, you define the canvas through HTML tags, for example:

<Canvas id = "canvas" width = "200" height = "200"> canvas is not supported in your browser. </canvas>

In this way, you have set up a 200x200 image.

Note that the width and height of the canvas element must be directly written on the label or set through js. If you use css settings, the browser will understand it as scaling the paper to the width and height you set. It is still different from expectation.

 

Then, the second step is to draw things, and the pen is needed for painting things. Get the paint brush:

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

In this way, we have this pen called ctx.

 

Then there is painting. It should be noted that two steps are required for canvas painting.

• Step 1: Tell the system the path of the things you want to draw
• Step 2: Tell the system how to fill the path

Simply put, if you draw a straight line, the Code should tell the system that I want to set a path from to, and then draw the path in black.

Use code to describe the above sentence:

Ctx. beginPath (); // start to draw the ctx path. moveTo (0, 0); // move to ctx. lineTo (100,100); // draw a straight line to 100,100 point ctx. closePath (); // closed path ctx. lineWidth = "5"; // set the line width 5px // The path description has ended ctx. strokeStyle = "#000"; // sets the stroke color to black ctx. stroke (); // executes stroke

The above code can draw a straight line. Of course, canvas can do more than that.

Canvas is the basis. There are too many things about canvas, but the principle is basically like this. Of course, in addition to stroke, there are also fill, fillRect, and drawImage. To learn canvas systematically, you really need a book or a series of tutorials. Because I just learned it, I won't miss my children. These basics are enough to understand the example below.

 

Iii. Rewards 

The simplest principle of a scratch effect is to put a basemap (or text, for example, thank you for your patronage) and then overwrite a canvas to cover the image, then bind the touchstart (mousedown), touchmove (mousemove), and touchend events. Then fill the canvas with "Transparency" when moving the canvas, and the part covered by the canvas will be displayed.

Let's look at the code, the simplest implementation.

 

1 <! DOCTYPE html> 2 <! -- [If lt IE 7]> 
 
The above code is completely written in order, so it should be easy to understand. The key is to set transparency and device judgment.
Update: added a code to determine the ratio of the scratch, because the actual requirement is probably to tell the user that the scratch is over. Here, because the scratch part is "Transparent", in the code, that is, the in the RGBA color value is transparent, and the RGBA value of each pixel can be obtained through the getImageData method, then, calculate the proportion. You can view the scaled data on the console.
So far, canva is used to complete the first small effect.
 
 
 
Reprinted this site, please indicate the author and the source of the wonderful flowers-http://www.cnblogs.com/season-huang/, do not for any commercial purposes