Actually, canvas is really simple. The complicated part is actually your creativity, canvas creativity.

Actually, canvas is really simple. The complicated part is actually your creativity, canvas creativity.

In addition to the "H5" of the ox cross, the canvas application of the ox cross is also spread across the rivers and lakes.

Canvas is a part of html5. Of course, H5 is not the meaning of html5. It just means that in the mobile browser, what is more chivalrous is the cool web page opened in the browser.

Once upon a time, I also thought that canvas was really cool. All kinds of fireworks, cool animation effects, and canvas games were burning my enthusiasm for learning.

Later, after learning and reading more books, canvas is not complicated and there are not many things to use.

Sort it out:

1. Draw basic ry

(1) Straight Line

ctx.moveTo(100,200);ctx.lineTo(120,300);ctx.lineWidth = 10;ctx.strokeStyle = '#000';ctx.stroke();

(2) rectangle

ctx.fillRect(0,0,100,100);

(3) circle

Ctx. arc( 200,200,100, 0, Math. PI * (1/2), false); // x, y, radius, start angle, end angle, and ctx in the counterclockwise direction. stroke ();

(4) triangles (connected by straight lines)

ctx.moveTo(400,200);ctx.lineTo(350,260);ctx.lineTo(450,260);ctx.lineTo(400,200);ctx.lineWidth = 5;ctx.strokeStyle = 'blue';ctx.fillStyle = 'orange';ctx.stroke();ctx.fill();

(5) curve

ctx.lineWidth = 2;ctx.strokeStyle = "#f00";ctx.moveTo(10,10);ctx.arcTo(210,60,10,210,20);ctx.stroke();

(6) Secondary besell Curve

ctx.lineWidth = 3;ctx.strokeStyle = 'blue';ctx.moveTo(100,100);ctx.quadraticCurveTo(125,225,225,166);ctx.stroke();

(7) cubic besell Curve

ctx.moveTo(20,20);ctx.bezierCurveTo(20,100,200,100,200,20);

The above is the basic method for drawing geometric images. Although it is simple, it is great to combine Complex Images with simple geometric images as long as the idea is good.

2. Add Images

There are three methods of painting. The function methods are the same, but the parameters are different. More parameters indicate more complicated and controllable items.

Var img = new Image (); img. src = '1.jpg '; img. onload = function () {// method 1 ctx. drawImage (img, 0, 0); // method 2, 5 argsctx. drawImage (img, 330,0, 200,300); // method 3, 9 argsctx. drawImage (img, 320,384,330,320,160,192 );}

3. Draw text

ctx.font="20px Georgia";ctx.fillText("Hello World!",10,50);

In addition to fillText, you can also use strokeText to draw images, such as strokeStyle.

4. Conversion (scaling, displacement, rotation)

Example: rotate a rectangle

var mycanvas = document.getElementById('mycanvas'),ctx = mycanvas.getContext('2d'),cw = mycanvas.width,ch = mycanvas.height,rw = 100,rh = 50,degree = 0;setInterval(function(){ctx.clearRect(0,0,cw,ch);ctx.save();ctx.translate(300,300);ctx.rotate(Math.PI/180*(degree++));ctx.fillStyle = '#999';ctx.fillRect(-rw/2,-rh/2,rw,rh);ctx.restore();},10);

5. Style and shadow

Set the shadow size, color, and offset.

ctx.shadowBlur=20;ctx.shadowColor="black";ctx.shadowOffsetX = "10";ctx.shadowOffsetY = "20";

Create and use linear gradient:

var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"black");grd.addColorStop(1,"white");ctx.fillStyle=grd;ctx.fillRect(20,20,150,100);

Create and use a radial gradient:

var grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");ctx.fillStyle=grd;ctx.fillRect(10,10,150,100);

You can set attributes such as tile with the same background image as css.

var img=document.getElementById("lamp");var pat=ctx.createPattern(img,"repeat");ctx.rect(0,0,150,100);ctx.fillStyle=pat;ctx.fill();

6. Synthesis Method

The so-called synthesis method is what kind of processing method is used when two images are superimposed, for example, covering the top, and deepening or fading of some covered colors:

Wrote a test demo: http://codepen.io/fonglezen/pen/xGPXGW

Basically, these basic methods and attributes are described above, and some other methods are not listed, such as lineCap.

Based on these basic methods, you still need your own computing and graphics capabilities and creativity to make something decent.

For example, the knowledge of physical computing in Mathematics (object motion, collision detection, etc.), the color (reversed color, pixel data processing, etc.) in graphics, and the idea (game ).

Animation is the power to make canvas shine.

Canvas does not provide an animation method. You need to write the animation process yourself.

In canvas, the difficulty lies in how to use your mathematical knowledge, physical knowledge, art, creativity, and other things to create cool things.

Such as particle animation and H5 browser games, such as stars, fireworks, and snow.

Some examples of canvas: https://developer.mozilla.org/en-US/demos/tag/tech:canvas

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.