communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer： 2016-06-24 11:56:30
original
1071 Les gens l'ont consulté

来源：http://www.ido321.com/968.html

一、Canvas的基础知识

Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。

在页面放置canvas元素很简单，利用标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~

二、Canvas小案例（测试结果来自Google最新版本）

1、绘制矩形

canvas.html:

   1: <!DOCTYPE >
Copier après la connexion
   2: <html>
Copier après la connexion
   3: <head>
Copier après la connexion
   4: <meta charset="utf-8">
Copier après la connexion
   5: <title>canvas元素学习</title>
Copier après la connexion
   6: <script type="text/javascript" src="canvas.js">
Copier après la connexion
   7: </script>
Copier après la connexion
   8: </head>
Copier après la connexion
   9: <body>
Copier après la connexion
  10:     <h3>canvas元素学习</h3>
Copier après la connexion
  11:     <canvas id="canvas" width="400" height="300"></canvas>
Copier après la connexion
  12: </body>
Copier après la connexion
  13: </html>
Copier après la connexion

canvas.js:

   1: window.onload=function()
Copier après la connexion
   2: {
Copier après la connexion
   3:     // 获取canvas 的ID
Copier après la connexion
   4:     var canvas = document.getElementById('canvas');
Copier après la connexion
   5:     if (canvas == null)
Copier après la connexion
   6:     {
Copier après la connexion
   7:         return false;
Copier après la connexion
   8:     }
Copier après la connexion
   9:     // 获取上下文
Copier après la connexion
  10:     var context = canvas.getContext('2d');
Copier après la connexion
  11:     // 设置填充的样式
Copier après la connexion
  12:     context.fillStyle = "#eeeeff";
Copier après la connexion

13: // 绘制矩形,以fillStyle填充，fillRect（strokeRect）前两个参数是矩形左上角位置,后两个参数分别是宽和高

//默认原点是canvas的左上角

  14:     context.fillRect(0,0,400,300);
Copier après la connexion
  15:     context.fillStyle = 'red';
Copier après la connexion
  16:     // 设置边框的样式
Copier après la connexion
  17:     context.strokeStyle = 'blue';
Copier après la connexion
  18:     // 设置边框大小
Copier après la connexion
  19:     context.lineWidth = 2;
Copier après la connexion
  20:     context.fillRect(50,50,100,100);
Copier après la connexion
  21:     // 绘制矩形边框
Copier après la connexion
  22:     context.strokeRect(50,50,100,100);
Copier après la connexion
  23: }
Copier après la connexion

效果：

2、绘制圆形：使用路径绘制

   1: // 获取canvas 的ID
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   2:     var canvas = document.getElementById('canvas');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   3:     if (canvas == null)
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   4:     {
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   5:         return false;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   6:     }
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   7:     // 获取上下文
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   8:     var context = canvas.getContext('2d');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   9:     // 设置填充的样式
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  10:     context.fillStyle = "#eeeeff";
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  11:     // 绘制矩形,以fillStyle填充
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  12:     context.fillRect(0,0,400,300);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  13:     for(var i = 0; i<9; i++)
Copier après la connexion
  14:     {
Copier après la connexion
  15:         // 创建路径
Copier après la connexion
  16:         context.beginPath();
Copier après la connexion
  17:         // 绘制圆形路径
Copier après la connexion
  18:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
Copier après la connexion
  19:         // 关闭路径，如果不关闭，则图像会重叠
Copier après la connexion
  20:         context.closePath();
Copier après la connexion
  21:         context.fillStyle = 'rgba(255,0,0,0.25)';
Copier après la connexion
  22:         // 以fillStyle填充
Copier après la connexion
  23:         context.fill();
Copier après la connexion
  24:     }
Copier après la connexion

arc()绘制圆弧，其参数如下

arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y 是圆弧的圆心位置，radius是半径，startAngle和endAngle是起始和结束的角度，单位是弧度（度数必须转为弧 度），anticlockwise是一个布尔值，true表示顺时针绘制图像，false表示逆时针绘制。起始角度是0，结束角度是360（PI*2）就 可以绘制圆形。

效果：

3、绘制直线

绘制直线用到moveTo()和lineTo()两个方法

   1: // 获取canvas 的ID
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   2:     var canvas = document.getElementById('canvas');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   3:     if (canvas == null)
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   4:     {
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   5:         return false;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   6:     }
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   7:     // 获取上下文
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   8:     var context = canvas.getContext('2d');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   9:     // 设置填充的样式
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  10:     context.fillStyle = "#eeeeff";
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  11:     // 绘制矩形,以fillStyle填充
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  12:     context.fillRect(0,0,400,300);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

13: context.beginPath();

//参数线的起点坐标

14: context.moveTo(50,50);

//参数线的终点坐标

  15:     context.lineTo(100,100);
Copier après la connexion

16: context.closePath();

//关闭路径之后绘制图形

  17:     context.strokeStyle = 'red';
Copier après la connexion
  18:     context.stroke();
Copier après la connexion

效果：

绘制一个复杂点的

   1: // 获取canvas 的ID
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   2:     var canvas = document.getElementById('canvas');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   3:     if (canvas == null)
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   4:     {
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   5:         return false;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   6:     }
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   7:     // 获取上下文
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   8:     var context = canvas.getContext('2d');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   9:     // 设置填充的样式
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  10:     context.fillStyle = "#eeeeff";
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  11:     // 绘制矩形,以fillStyle填充
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  12:     context.fillRect(0,0,400,300);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  13:     var dx = 150;
Copier après la connexion
Copier après la connexion
  14:     var dy = 150;
Copier après la connexion
Copier après la connexion
  15:     var s  = 100;
Copier après la connexion
Copier après la connexion
  16:      // 创建路径
Copier après la connexion
Copier après la connexion
  17:      context.beginPath();
Copier après la connexion
Copier après la connexion
  18:      context.fillStyle = 'rgb(100,255,100)';
Copier après la connexion
Copier après la connexion
  19:      context.strokeStyle = 'rgb(0,0100)';
Copier après la connexion
Copier après la connexion
  20:      var x = Math.sin(0);
Copier après la connexion
Copier après la connexion
  21:      var y = Math.cos(0);
Copier après la connexion
Copier après la connexion
  22:      var dig = Math.PI/15 *11;
Copier après la connexion
Copier après la connexion
  23:      for (var i = 0; i < 30; i++) {
Copier après la connexion
  24:          var x = Math.sin(i * dig);
Copier après la connexion
  25:          var y = Math.cos(i * dig);
Copier après la connexion
  26:          context.lineTo(dx+x*s,dx+y*s);
Copier après la connexion
  27:      }
Copier après la connexion
  28:      context.closePath();
Copier après la connexion
  29:      context.fill();
Copier après la connexion
  30:      context.stroke();
Copier après la connexion

效果：

4、绘制曲线：利用bezierCurveTo绘制贝济埃曲线

bezierCurveTo可以绘制曲线，是lineTo的曲线版本

   1: // 获取canvas 的ID
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   2:     var canvas = document.getElementById('canvas');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   3:     if (canvas == null)
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   4:     {
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   5:         return false;
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   6:     }
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   7:     // 获取上下文
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   8:     var context = canvas.getContext('2d');
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
   9:     // 设置填充的样式
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  10:     context.fillStyle = "#eeeeff";
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  11:     // 绘制矩形,以fillStyle填充
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  12:     context.fillRect(0,0,400,300);
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion
  13:     var dx = 150;
Copier après la connexion
Copier après la connexion
  14:     var dy = 150;
Copier après la connexion
Copier après la connexion
  15:     var s  = 100;
Copier après la connexion
Copier après la connexion
  16:      // 创建路径
Copier après la connexion
Copier après la connexion
  17:      context.beginPath();
Copier après la connexion
Copier après la connexion
  18:      context.fillStyle = 'rgb(100,255,100)';
Copier après la connexion
Copier après la connexion
  19:      context.strokeStyle = 'rgb(0,0100)';
Copier après la connexion
Copier après la connexion
  20:      var x = Math.sin(0);
Copier après la connexion
Copier après la connexion
  21:      var y = Math.cos(0);
Copier après la connexion
Copier après la connexion
  22:      var dig = Math.PI/15 *11;
Copier après la connexion
Copier après la connexion
  23:      context.moveTo(dx,dy);
Copier après la connexion
  24:      for (var i = 0; i < 30; i++) {
Copier après la connexion
  25:          var x = Math.sin(i * dig);
Copier après la connexion
  26:          var y = Math.cos(i * dig);
Copier après la connexion
  27:          context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
Copier après la connexion
  28:      }
Copier après la connexion
  29:      context.closePath();
Copier après la connexion
  30:      context.fill();
Copier après la connexion
  31:      context.stroke();
Copier après la connexion

效果


 

下一篇：Canvas入门（2）:图形渐变和图像形变换

 

Étiquettes associées：
Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
source：php.cn
Article précédent：css移动端:acitve效果的实现_html/css_WEB-ITnose Article suivant：FAILED
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1818
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1988
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1670
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1574
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1595
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal