Getting Started with Canvas (2): Graphic Gradient and Image Shape Transformation_html/css_WEB-ITnose

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

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

1. Draw linear gradient

   1: // 获取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 获取上下文

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

   9:     // 获取渐变对象

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

  11:     // 添加渐变颜色

  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 parameters represent the horizontal and vertical coordinates of the starting position and end position of the gradient respectively

addColorStop(offset,color): offset represents the set color The offset from the starting position of the gradient. The value range is a floating point value from 0 to 1. The starting offset of the gradient is 0, and the ending offset of the gradient is 1. color is the color of the gradient.

Effect:

2. Draw radial gradient

   1: // 获取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 获取上下文

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

   9:     // 获取渐变对象

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

  11:     // 添加渐变颜色

  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,radius1 are respectively The horizontal and vertical coordinates and radius of the center of the circle where the gradient starts. x2, y2, radius2 are the horizontal and vertical coordinates and radius of the center of the gradient end circle respectively.

Effect

2. Graphic transformation

1. Coordinate transformation: translation, scaling and rotation

   1: // 获取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 获取上下文

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

   9:     context.fillStyle = '#eeeeff';

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

  11:     // 平移坐标原点

  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:         // 图形缩放

  18:         context.scale(0.95,0.95);

  19:         // 图形旋转

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

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

  22:     }

translate(x,y): Translate the origin, x,y represents how many units to move left and down. The default unit is pixels

scale(x,y): scaling, x,y represents the horizontal and vertical scaling size. If less than 1, it will be reduced, and if it is greater than 1, it will be enlarged.

rotate(angle): Rotation, angle is the rotation angle, the unit is radians. Greater than 0 means clockwise rotation, otherwise counterclockwise.

Effect:

2. Matrix transformation

   1: // 获取canvas 的ID

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

   3:     if (canvas == null)

   4:     {

   5:         return false;

   6:     }

   7:     // 获取上下文

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

   9:     // 定义颜色

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

  11:     // 定义线宽

  12:     context.lineWidth = 10;

  13:     // 矩阵变换

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

  15:     // 循环绘制圆弧

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

17: { //Move the origin down 10 px each time

  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): Change the method to use a new transformation matrix Multiply with the current transformation matrix. dx, dy represent the units for moving the origin coordinates to the left and down, and the default is pixels.

The format of the transformation matrix is ​​as follows

m11 m12 dx

m21 m22 dy

0 0 1

Final effect:

Summary: All coordinate transformation methods can be replaced by transform(). The rules are as follows:

1. translate(x,y) <=> transform(1,0 ,0,1,dx,dy) or transform(0,1,1,0,dx,dy), the first four parameters indicate that the graphics will not be scaled.

2. scale(x,y) <=> transform(x,0,0,y,0,0) or transform(0,y,x,0,0,0), followed by Two parameters indicate no translation.

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),0,0) 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),0,0)

Next article: Getting started with Canvas (3): Image processing and drawing text