应用HTML5 Canvas API绘图弧线的实例教程

日期：2020-12-11 类型：科技新闻 

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

绘图规范圆弧

在刚开始以前，大家提升1下大家的作图自然环境。设计灵感来自于上节课的纹路，假如不喜爱这个情况，我在images文件目录下还出示了别的的情况图，供大伙儿挑选。此外把全部的款式表都写在了<head>下。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>新的画布</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.     }   
  28. </script>   
  29. </body>   
  30. </html>  

运作結果：

之因此要绘图1个空白的矩形框铺满画布，是由于大家以前说过，canvas是全透明的，假如不设定情况色，那末它就会被我设定的<body>纹路所遮盖，要想使其有着情况色（白色），仅有绘图矩形框遮盖canvas这1个方式。

如何，是否十分的酷？

应用arc()绘图圆弧
arc()的应用方式以下：

JavaScript Code拷贝內容到剪贴板
  1. context.arc(x,y,radius,startAngle,endAngle,anticlockwise)  

前面3个主要参数，各自是圆心座标与圆半径。startAngle、endAngle应用的是弧度值，并不是角度值。弧度的要求是肯定的，以下图。

anticlockwise表明绘图的方式，是顺时针還是逆时针绘图。它传入布尔运算值，true表明逆时针绘图，false表明顺时针绘图，缺省值为false。

弧度的要求是肯定的，甚么意思呢？便是指你要绘图甚么样的圆弧，弧度立即按上面的那个规范填就可以了。

例如你绘图 0.5pi ~ 1pi 的圆弧，假如顺时针画，就只是左下角那1/4个圆弧；假如逆时针画，便是与之互补的右上角的3/4圆弧。此处自身尝试，已不举例。

应用切点绘图圆弧

arcTo()详细介绍:
arcTo()方式接受5个主要参数，各自是两个切点的座标和圆弧半径。这个方式是根据切线画弧线，即由两个切线明确1条弧线。
实际以下。

JavaScript Code拷贝內容到剪贴板
  1. arcTo(x1,y1,x2,y2,radius)  

这个涵数以给定的半径绘图1条弧线，圆弧的起始点与当今相对路径的部位到(x1, y1)点的平行线相切，圆弧的终点站与(x1, y1)点到(x2, y2)的平行线相切。因而其一般相互配合moveTo()或lineTo()应用。其工作能力是能够被更加简易的arc()取代的，其繁杂就繁杂在绘图方式上应用了切点。

应用切点绘图弧线:
下面的实例我把切线也绘图出来了，看的更清晰1些。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  5.     <title>绘图弧线</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的访问器竟然不适用Canvas？！赶紧换1个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);   
  28.     };   
  29.   
  30.     function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){   
  31.         cxt.beginPath();   
  32.         cxt.moveTo(x0, y0);   
  33.         cxt.arcTo(x1, y1, x2, y2, r);   
  34.   
  35.         cxt.lineWidth = 6;   
  36.         cxt.strokeStyle = "red";   
  37.         cxt.stroke();   
  38.   
  39.         cxt.beginPath();   
  40.         cxt.moveTo(x0, y0);   
  41.         cxt.lineTo(x1, y1);   
  42.         cxt.lineTo(x2, y2);   
  43.   
  44.         cxt.lineWidth = 1;   
  45.         cxt.strokeStyle = "#0088AA";   
  46.         cxt.stroke();   
  47.   
  48.     }   
  49. </script>   
  50. </body>   
  51. </html>  

运作結果：

这个实例也很好表明了arcTo()的各个重要点的功效。以便更清晰的解释，我再标明1个剖析图。

这里留意1下，arcTo()绘图的起始点是(x0, y0)，但(x0, y0)不1定是圆弧的切点。真实的arcTo()涵数只传入(x1, y1)和(x2, y2)。在其中(x1, y1)称为操纵点，(x2, y2)是圆弧终点站的切点，它不1定在圆弧上。但(x0, y0)1定在圆弧上。
有1点点绕，下面大家更改drawArcTo()涵数的主要参数来实验1下。
(x2, y2)不1定在弧网上：

JavaScript Code拷贝內容到剪贴板
  1. drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);  

(x0, y0)1定在弧网上：

JavaScript Code拷贝內容到剪贴板
  1. drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);  

挺成心思的，它以便历经(x0, y0)立即将切点和(x0, y0)联接起来产生直线。好执着的弧线……

上一篇：浅谈Html5中视頻 声频标识 进度条的难题 返回下一篇：全面分析HTML5中的规范特性与自定特性