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

   1: <!DOCTYPE >

Salin selepas log masuk

   2: <html>

Salin selepas log masuk

   3: <head>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

   7: </script>

Salin selepas log masuk

   8: </head>

Salin selepas log masuk

   9: <body>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  12: </body>

Salin selepas log masuk

  13: </html>

Salin selepas log masuk

   1: window.onload=function()

Salin selepas log masuk

   2: {

Salin selepas log masuk

   3:     // 获取canvas 的ID

Salin selepas log masuk

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

Salin selepas log masuk

   5:     if (canvas == null)

Salin selepas log masuk

   6:     {

Salin selepas log masuk

   7:         return false;

Salin selepas log masuk

   8:     }

Salin selepas log masuk

   9:     // 获取上下文

Salin selepas log masuk

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

Salin selepas log masuk

  11:     // 设置填充的样式

Salin selepas log masuk

  12:     context.fillStyle = "#eeeeff";

Salin selepas log masuk

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

Salin selepas log masuk

  15:     context.fillStyle = 'red';

Salin selepas log masuk

  16:     // 设置边框的样式

Salin selepas log masuk

  17:     context.strokeStyle = 'blue';

Salin selepas log masuk

  18:     // 设置边框大小

Salin selepas log masuk

  19:     context.lineWidth = 2;

Salin selepas log masuk

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

Salin selepas log masuk

  21:     // 绘制矩形边框

Salin selepas log masuk

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

Salin selepas log masuk

  23: }

Salin selepas log masuk

   1: // 获取canvas 的ID

Salin selepas log masuk

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

Salin selepas log masuk

   3:     if (canvas == null)

Salin selepas log masuk

   4:     {

Salin selepas log masuk

   5:         return false;

Salin selepas log masuk

   6:     }

Salin selepas log masuk

   7:     // 获取上下文

Salin selepas log masuk

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

Salin selepas log masuk

   9:     // 设置填充的样式

Salin selepas log masuk

  10:     context.fillStyle = "#eeeeff";

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  14:     {

Salin selepas log masuk

  15:         // 创建路径

Salin selepas log masuk

  16:         context.beginPath();

Salin selepas log masuk

  17:         // 绘制圆形路径

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  20:         context.closePath();

Salin selepas log masuk

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

Salin selepas log masuk

  22:         // 以fillStyle填充

Salin selepas log masuk

  23:         context.fill();

Salin selepas log masuk

  24:     }

Salin selepas log masuk

   1: // 获取canvas 的ID

Salin selepas log masuk

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

Salin selepas log masuk

   3:     if (canvas == null)

Salin selepas log masuk

   4:     {

Salin selepas log masuk

   5:         return false;

Salin selepas log masuk

   6:     }

Salin selepas log masuk

   7:     // 获取上下文

Salin selepas log masuk

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

Salin selepas log masuk

   9:     // 设置填充的样式

Salin selepas log masuk

  10:     context.fillStyle = "#eeeeff";

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  15:     context.lineTo(100,100);

Salin selepas log masuk

  17:     context.strokeStyle = 'red';

Salin selepas log masuk

  18:     context.stroke();

Salin selepas log masuk

   1: // 获取canvas 的ID

Salin selepas log masuk

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

Salin selepas log masuk

   3:     if (canvas == null)

Salin selepas log masuk

   4:     {

Salin selepas log masuk

   5:         return false;

Salin selepas log masuk

   6:     }

Salin selepas log masuk

   7:     // 获取上下文

Salin selepas log masuk

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

Salin selepas log masuk

   9:     // 设置填充的样式

Salin selepas log masuk

  10:     context.fillStyle = "#eeeeff";

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  13:     var dx = 150;

Salin selepas log masuk

  14:     var dy = 150;

Salin selepas log masuk

  15:     var s  = 100;

Salin selepas log masuk

  16:      // 创建路径

Salin selepas log masuk

  17:      context.beginPath();

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  27:      }

Salin selepas log masuk

  28:      context.closePath();

Salin selepas log masuk

  29:      context.fill();

Salin selepas log masuk

  30:      context.stroke();

Salin selepas log masuk

   1: // 获取canvas 的ID

Salin selepas log masuk

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

Salin selepas log masuk

   3:     if (canvas == null)

Salin selepas log masuk

   4:     {

Salin selepas log masuk

   5:         return false;

Salin selepas log masuk

   6:     }

Salin selepas log masuk

   7:     // 获取上下文

Salin selepas log masuk

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

Salin selepas log masuk

   9:     // 设置填充的样式

Salin selepas log masuk

  10:     context.fillStyle = "#eeeeff";

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  13:     var dx = 150;

Salin selepas log masuk

  14:     var dy = 150;

Salin selepas log masuk

  15:     var s  = 100;

Salin selepas log masuk

  16:      // 创建路径

Salin selepas log masuk

  17:      context.beginPath();

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  23:      context.moveTo(dx,dy);

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

  28:      }

Salin selepas log masuk

  29:      context.closePath();

Salin selepas log masuk

  30:      context.fill();

Salin selepas log masuk

  31:      context.stroke();

Salin selepas log masuk

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