Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形_html/css

   1: <!DOCTYPE >

Nach dem Login kopieren

   2: <html>

Nach dem Login kopieren

   3: <head>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

   7: </script>

Nach dem Login kopieren

   8: </head>

Nach dem Login kopieren

   9: <body>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  12: </body>

Nach dem Login kopieren

  13: </html>

Nach dem Login kopieren

   1: window.onload=function()

Nach dem Login kopieren

   2: {

Nach dem Login kopieren

   3:     // 获取canvas 的ID

Nach dem Login kopieren

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

Nach dem Login kopieren

   5:     if (canvas == null)

Nach dem Login kopieren

   6:     {

Nach dem Login kopieren

   7:         return false;

Nach dem Login kopieren

   8:     }

Nach dem Login kopieren

   9:     // 获取上下文

Nach dem Login kopieren

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

Nach dem Login kopieren

  11:     // 设置填充的样式

Nach dem Login kopieren

  12:     context.fillStyle = "#eeeeff";

Nach dem Login kopieren

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

Nach dem Login kopieren

  15:     context.fillStyle = 'red';

Nach dem Login kopieren

  16:     // 设置边框的样式

Nach dem Login kopieren

  17:     context.strokeStyle = 'blue';

Nach dem Login kopieren

  18:     // 设置边框大小

Nach dem Login kopieren

  19:     context.lineWidth = 2;

Nach dem Login kopieren

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

Nach dem Login kopieren

  21:     // 绘制矩形边框

Nach dem Login kopieren

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

Nach dem Login kopieren

  23: }

Nach dem Login kopieren

   1: // 获取canvas 的ID

Nach dem Login kopieren

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

Nach dem Login kopieren

   3:     if (canvas == null)

Nach dem Login kopieren

   4:     {

Nach dem Login kopieren

   5:         return false;

Nach dem Login kopieren

   6:     }

Nach dem Login kopieren

   7:     // 获取上下文

Nach dem Login kopieren

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

Nach dem Login kopieren

   9:     // 设置填充的样式

Nach dem Login kopieren

  10:     context.fillStyle = "#eeeeff";

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  14:     {

Nach dem Login kopieren

  15:         // 创建路径

Nach dem Login kopieren

  16:         context.beginPath();

Nach dem Login kopieren

  17:         // 绘制圆形路径

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  20:         context.closePath();

Nach dem Login kopieren

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

Nach dem Login kopieren

  22:         // 以fillStyle填充

Nach dem Login kopieren

  23:         context.fill();

Nach dem Login kopieren

  24:     }

Nach dem Login kopieren

   1: // 获取canvas 的ID

Nach dem Login kopieren

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

Nach dem Login kopieren

   3:     if (canvas == null)

Nach dem Login kopieren

   4:     {

Nach dem Login kopieren

   5:         return false;

Nach dem Login kopieren

   6:     }

Nach dem Login kopieren

   7:     // 获取上下文

Nach dem Login kopieren

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

Nach dem Login kopieren

   9:     // 设置填充的样式

Nach dem Login kopieren

  10:     context.fillStyle = "#eeeeff";

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  15:     context.lineTo(100,100);

Nach dem Login kopieren

  17:     context.strokeStyle = 'red';

Nach dem Login kopieren

  18:     context.stroke();

Nach dem Login kopieren

   1: // 获取canvas 的ID

Nach dem Login kopieren

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

Nach dem Login kopieren

   3:     if (canvas == null)

Nach dem Login kopieren

   4:     {

Nach dem Login kopieren

   5:         return false;

Nach dem Login kopieren

   6:     }

Nach dem Login kopieren

   7:     // 获取上下文

Nach dem Login kopieren

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

Nach dem Login kopieren

   9:     // 设置填充的样式

Nach dem Login kopieren

  10:     context.fillStyle = "#eeeeff";

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  13:     var dx = 150;

Nach dem Login kopieren

  14:     var dy = 150;

Nach dem Login kopieren

  15:     var s  = 100;

Nach dem Login kopieren

  16:      // 创建路径

Nach dem Login kopieren

  17:      context.beginPath();

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  27:      }

Nach dem Login kopieren

  28:      context.closePath();

Nach dem Login kopieren

  29:      context.fill();

Nach dem Login kopieren

  30:      context.stroke();

Nach dem Login kopieren

   1: // 获取canvas 的ID

Nach dem Login kopieren

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

Nach dem Login kopieren

   3:     if (canvas == null)

Nach dem Login kopieren

   4:     {

Nach dem Login kopieren

   5:         return false;

Nach dem Login kopieren

   6:     }

Nach dem Login kopieren

   7:     // 获取上下文

Nach dem Login kopieren

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

Nach dem Login kopieren

   9:     // 设置填充的样式

Nach dem Login kopieren

  10:     context.fillStyle = "#eeeeff";

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  13:     var dx = 150;

Nach dem Login kopieren

  14:     var dy = 150;

Nach dem Login kopieren

  15:     var s  = 100;

Nach dem Login kopieren

  16:      // 创建路径

Nach dem Login kopieren

  17:      context.beginPath();

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  23:      context.moveTo(dx,dy);

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

  28:      }

Nach dem Login kopieren

  29:      context.closePath();

Nach dem Login kopieren

  30:      context.fill();

Nach dem Login kopieren

  31:      context.stroke();

Nach dem Login kopieren

Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形_html/css_WEB-ITnose