Getting Started with Canvas (1): Draw basic graphics such as rectangles, circles, straight lines, curves, etc._html/css

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

1. Basic knowledge of Canvas

Canvas is HTML 5 A new element is added specifically for drawing graphics. The canvas element is equivalent to a "canvas", a colorless and transparent area, and JavaScript needs to be used to write a script for painting in it.

Placing canvas elements on the page is very simple. Use the

2. Canvas small case (test results are from the latest version of Google)

1. Drawing Rectangle

canvas.html:

   1: <!DOCTYPE >

Copy after login

   2: <html>

Copy after login

   3: <head>

Copy after login

   4: <meta charset="utf-8">

Copy after login

   5: <title>canvas元素学习</title>

Copy after login

   6: <script type="text/javascript" src="canvas.js">

Copy after login

   7: </script>

Copy after login

   8: </head>

Copy after login

   9: <body>

Copy after login

  10:     <h3>canvas元素学习</h3>

Copy after login

  11:     <canvas id="canvas" width="400" height="300"></canvas>

Copy after login

  12: </body>

Copy after login

  13: </html>

Copy after login

canvas.js:

   1: window.onload=function()

Copy after login

   2: {

Copy after login

   3:     // 获取canvas 的ID

Copy after login

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

Copy after login

   5:     if (canvas == null)

Copy after login

   6:     {

Copy after login

   7:         return false;

Copy after login

   8:     }

Copy after login

   9:     // 获取上下文

Copy after login

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

Copy after login

  11:     // 设置填充的样式

Copy after login

  12:     context.fillStyle = "#eeeeff";

Copy after login

13: // Draw a rectangle and fill it with fillStyle. The first two parameters of fillRect (strokeRect) are the position of the upper left corner of the rectangle, and the last two parameters are respectively Is the width and height

//The default origin is the upper left corner of the canvas

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

Copy after login

  15:     context.fillStyle = 'red';

Copy after login

  16:     // 设置边框的样式

Copy after login

  17:     context.strokeStyle = 'blue';

Copy after login

  18:     // 设置边框大小

Copy after login

  19:     context.lineWidth = 2;

Copy after login

  20:     context.fillRect(50,50,100,100);

Copy after login

  21:     // 绘制矩形边框

Copy after login

  22:     context.strokeRect(50,50,100,100);

Copy after login

  23: }

Copy after login

Effect:

2. Draw a circle: use path to draw

   1: // 获取canvas 的ID

Copy after login

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

Copy after login

   3:     if (canvas == null)

Copy after login

   4:     {

Copy after login

   5:         return false;

Copy after login

   6:     }

Copy after login

   7:     // 获取上下文

Copy after login

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

Copy after login

   9:     // 设置填充的样式

Copy after login

  10:     context.fillStyle = "#eeeeff";

Copy after login

  11:     // 绘制矩形,以fillStyle填充

Copy after login

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

Copy after login

  13:     for(var i = 0; i<9; i++)

Copy after login

  14:     {

Copy after login

  15:         // 创建路径

Copy after login

  16:         context.beginPath();

Copy after login

  17:         // 绘制圆形路径

Copy after login

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

Copy after login

  19:         // 关闭路径，如果不关闭，则图像会重叠

Copy after login

  20:         context.closePath();

Copy after login

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

Copy after login

  22:         // 以fillStyle填充

Copy after login

  23:         context.fill();

Copy after login

  24:     }

Copy after login

arc() draws an arc, its parameters are as follows

arc(x,y,radius,startAngle, endAngle, anticlockwise): x, y is the center position of the arc, radius is the radius, startAngle and endAngle are the starting and ending angles, the unit is radians (degrees must be converted to radians), anticlockwise is a Boolean value, true means sequential Draw the image clockwise, false means draw it counterclockwise. The starting angle is 0 and the ending angle is 360 (PI*2) to draw a circle.

Effect:

3. Drawing a straight line

Drawing a straight line uses the moveTo() and lineTo() methods

   1: // 获取canvas 的ID

Copy after login

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

Copy after login

   3:     if (canvas == null)

Copy after login

   4:     {

Copy after login

   5:         return false;

Copy after login

   6:     }

Copy after login

   7:     // 获取上下文

Copy after login

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

Copy after login

   9:     // 设置填充的样式

Copy after login

  10:     context.fillStyle = "#eeeeff";

Copy after login

  11:     // 绘制矩形,以fillStyle填充

Copy after login

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

Copy after login

13: context.beginPath();

//The starting point coordinates of the parameter line

14: context.moveTo(50,50);

//The end point coordinates of the parameter line

  15:     context.lineTo(100,100);

Copy after login

16: context.closePath();

//Draw graphics after closing the path

  17:     context.strokeStyle = 'red';

Copy after login

  18:     context.stroke();

Copy after login

Effect:

Draw a complex point

   1: // 获取canvas 的ID

Copy after login

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

Copy after login

   3:     if (canvas == null)

Copy after login

   4:     {

Copy after login

   5:         return false;

Copy after login

   6:     }

Copy after login

   7:     // 获取上下文

Copy after login

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

Copy after login

   9:     // 设置填充的样式

Copy after login

  10:     context.fillStyle = "#eeeeff";

Copy after login

  11:     // 绘制矩形,以fillStyle填充

Copy after login

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

Copy after login

  13:     var dx = 150;

Copy after login

  14:     var dy = 150;

Copy after login

  15:     var s  = 100;

Copy after login

  16:      // 创建路径

Copy after login

  17:      context.beginPath();

Copy after login

  18:      context.fillStyle = 'rgb(100,255,100)';

Copy after login

  19:      context.strokeStyle = 'rgb(0,0100)';

Copy after login

  20:      var x = Math.sin(0);

Copy after login

  21:      var y = Math.cos(0);

Copy after login

  22:      var dig = Math.PI/15 *11;

Copy after login

  23:      for (var i = 0; i < 30; i++) {

Copy after login

  24:          var x = Math.sin(i * dig);

Copy after login

  25:          var y = Math.cos(i * dig);

Copy after login

  26:          context.lineTo(dx+x*s,dx+y*s);

Copy after login

  27:      }

Copy after login

  28:      context.closePath();

Copy after login

  29:      context.fill();

Copy after login

  30:      context.stroke();

Copy after login

Effect:

4. Draw the curve: Use bezierCurveTo to draw the Bezier curve

bezierCurveTo can draw curves and is the curve version of lineTo

   1: // 获取canvas 的ID

Copy after login

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

Copy after login

   3:     if (canvas == null)

Copy after login

   4:     {

Copy after login

   5:         return false;

Copy after login

   6:     }

Copy after login

   7:     // 获取上下文

Copy after login

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

Copy after login

   9:     // 设置填充的样式

Copy after login

  10:     context.fillStyle = "#eeeeff";

Copy after login

  11:     // 绘制矩形,以fillStyle填充

Copy after login

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

Copy after login

  13:     var dx = 150;

Copy after login

  14:     var dy = 150;

Copy after login

  15:     var s  = 100;

Copy after login

  16:      // 创建路径

Copy after login

  17:      context.beginPath();

Copy after login

  18:      context.fillStyle = 'rgb(100,255,100)';

Copy after login

  19:      context.strokeStyle = 'rgb(0,0100)';

Copy after login

  20:      var x = Math.sin(0);

Copy after login

  21:      var y = Math.cos(0);

Copy after login

  22:      var dig = Math.PI/15 *11;

Copy after login

  23:      context.moveTo(dx,dy);

Copy after login

  24:      for (var i = 0; i < 30; i++) {

Copy after login

  25:          var x = Math.sin(i * dig);

Copy after login

  26:          var y = Math.cos(i * dig);

Copy after login

  27:          context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);

Copy after login

  28:      }

Copy after login

  29:      context.closePath();

Copy after login

  30:      context.fill();

Copy after login

  31:      context.stroke();

Copy after login

Effect

Next article: Getting Started with Canvas ( 2): Graphic gradient and image shape transformation

Getting Started with Canvas (1): Draw basic graphics such as rectangles, circles, straight lines, curves, etc._html/css_WEB-ITnose