Canvas entry (2): graphic gradient and image transformation

Source: www.ido321.com986.html 1. Graphic gradient (all tested in the latest Google version) 1. Draw a linear gradient 1. Obtain the ID2: varcanvasdocument of the canvas. getElementById (canvas); 3: if (canvasnull) 4: {5: returnfalse; 6:} 7: Get Context 8:

Source: http://www.ido321.com/986.html, graphics gradient (all tested in the latest version of Google) 1, draw a linear gradient 1: // get the canvas ID 2: var canvas = document. getElementById ('canvas '); 3: if (canvas = null) 4: {5: return false; 6:} 7: // get Context 8:

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)

Canvas entry (3): Image Processing and text drawing