Canvas entry (2): graphic gradient and image transformation, canvas gradient

Canvas entry (2): graphic gradient and image transformation, canvas gradient

Source: http://www.ido321.com/986.html

 

1. Graphic gradient (all tested in the latest Google Version)

1. Draw a linear gradient

1: // obtain the canvas ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

7: // obtain the context

   8:     var context = canvas.getContext('2d');

9: // obtain the gradient object

  10:     var g1 = context.createLinearGradient(0,0,0,300);

11: // Add gradient color

  12:     g1.addColorStop(0,'rgb(255,255,0)');

  13:     g1.addColorStop(1,'rgb(0,255,255)');

  14:     context.fillStyle = g1;

  15:     context.fillRect(0,0,400,300);

  16:     var g2 = context.createLinearGradient(0,0,300,0);

  17:     g2.addColorStop(0,'rgba(0,0,255,0.5)');

  18:     g2.addColorStop(1,'rgba(255,0,0,0.5)');

  19:     for(var i = 0; i<10;i++)

  20:     {

  21:         context.beginPath();

  22:         context.fillStyle=g2;

  23:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

  24:         context.closePath();

  25:         context.fill();

  26:     }

CreateLinearGradient (x1, y1, x2, y2): the horizontal and vertical coordinates of the start position and end position of the gradient respectively.

AddColorStop (offset, color): offset indicates the offset of the set color from the starting position of the gradient. The value range is 0 ~ The floating point value of 1. The gradient start offset is 0, and the gradient end offset is 1. color is the gradient color.

Effect:

2. Draw a radial gradient

1: // obtain the canvas ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

7: // obtain the context

   8:     var context = canvas.getContext('2d');

9: // obtain the gradient object

  10:     var g1 = context.createRadialGradient(400,0,0,400,0,400);

11: // Add gradient color

  12:     g1.addColorStop(0.1,'rgb(255,255,0)');

  13:     g1.addColorStop(0.3,'rgb(255,0,255)');

  14:     g1.addColorStop(1,'rgb(0,255,255)');

  15:     context.fillStyle = g1;

  16:     context.fillRect(0,0,400,300);

  17:     var g2 = context.createRadialGradient(250,250,0,250,250,300);

  18:     g2.addColorStop(1,'rgba(0,0,255,0.5)');

  19:     g2.addColorStop(0.7,'rgba(255,255,0,0.5)')

  20:     g2.addColorStop(0.1,'rgba(255,0,0,0.5)');

  21:     for(var i = 0; i<10;i++)

  22:     {

  23:         context.beginPath();

  24:         context.fillStyle=g2;

  25:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

  26:         context.closePath();

  27:         context.fill();

  28:     }

CreateRadialGradient (x1, y1, radius1, x2, y2, radius2): x1, y1, and radius1 are the center Y axis and radius of the gradient start circle. X2, y2, and radius2 are the center X-axis and radius of the gradient ending circle.

Effect

Ii. Graphic Transformation

1. Coordinate Transformation: translation, scaling, and Rotation

1: // obtain the canvas ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

7: // obtain the context

   8:     var context = canvas.getContext('2d');

   9:     context.fillStyle = '#eeeeff';

  10:     context.fillRect(0,0,400,300);

11: // Pan coordinate origin

  12:     context.translate(200,50);

  13:     context.fillStyle = 'rgba(255,0,0,0.25)';

  14:     for(var i = 0; i<50;i++)

  15:     {

  16:         context.translate(25,25);

17: // graphical Scaling

  18:         context.scale(0.95,0.95);

19: // rotate the image

  20:         context.rotate(Math.PI / 10);

  21:         context.fillRect(0,0,100,50);

  22:     }

Translate (x, y): the number of units to move to the left and down. The default unit is pixel.

Scale (x, y): scale. x and y indicate the scale in the horizontal and vertical directions. Zoom in if the value is smaller than 1 and zoom in if the value is greater than 1.

Rotate (angle): rotate, angle is the rotation angle, unit is radian. If the value is greater than 0, it indicates clockwise rotation, and vice versa.

Effect:

2. Matrix Transformation

1: // obtain the canvas ID

   2:     var canvas = document.getElementById('canvas');

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

7: // obtain the context

   8:     var context = canvas.getContext('2d');

9: // define the color

  10:     var colors = ['red','orange','yellow','green','blue','navy','purple'];

11: // define the line width

  12:     context.lineWidth = 10;

13: // matrix transformation

  14:     context.transform(1,0,0,1,100,0);

15: // draw an arc cyclically

  16:     for (var i = 0; i < colors.length; i++)

17: {// 10 px values are moved down at the origin point.

  18:          context.transform(1,0,0,1,0,10);

  19:         context.strokeStyle = colors[i];

  20:         context.beginPath();

  21:         context.arc(50,100,100,0,Math.PI,true);

  22:         context.stroke();

  23:     }

Transform (m11, m12, m21, m22, dx, dy): Use a new transform matrix to perform multiplication with the current transform matrix. Dx, dy indicates the unit in which the origin coordinates are moved left and down. The default value is pixel.

The conversion matrix format is as follows:

M11 m12 dx

M21 m22 dy

0 0 1

Final effect:

Conclusion: The method of coordinate transformation can be replaced by transform (). The rules are as follows:

1. translate (x, y) <=> transform (, dx, dy) or transform (, dx, dy ), the first four parameters indicate that the image is not scaled.

2. scale (x, y) <=> transform (x, 0, 0, y, 0, 0) or transform (0, y, x, 0, 0 ), the following two parameters do not translate.

3. rotate (angle) <=> transform (Math. cos (angle * Math. PI/180), Math. sin (angle * Math. PI/180),-Math. sin (angle * Math. PI/180), Math. cos (angle * Math. PI/180),) or

Transform (-Math. sin (angle * Math. PI/180), Math. cos (angle * Math. PI/180), Math. cos (angle * Math. PI/180), Math. sin (angle * Math. PI/180)

 

Next article: Canvas (3): Image Processing and text drawing

Hello, I want to teach you an html5 canvas problem: I drew multiple images in the canvas, including images and straight lines.

Canvas can be implemented
First, canvas must respond to mouse events (such as onmousedown)
Then, all images must create corresponding objects to record their locations and sizes, and zOrder (stacked positions, which determine who is on top when two objects overlap ), put the corresponding objects in an array and sort by zOrder
After the canvas mouse click event is triggered, the zOrder sequence is used to check that the mouse coordinates are not in the Area of an object. If the mouse coordinates are in the Area of an object, the corresponding function is executed.

Ps How does one perform gradient processing on an irregular image?

Use the polygon plug-in tool to select the irregular image as the selection area, and then use the gradient tool to fill in the gradient.