首页 > 代码库 > HTML5 canvas 中的arcTo()方法的用法

HTML5 canvas 中的arcTo()方法的用法

2024-07-04 07:05:48   227人阅读

除了arc()之外，Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法，那就是arcTo()。改方法接受了5个参数：

arcTo(x1,x2,y1,y2,radius)

arcTo()方法的参数分别代表两个点击圆形半径。该方法一指定的半径来绘制一条圆弧，此圆弧与当前点到第一个点（x1,y1）的连线相切，而且第一个点到第二点（x2,y2）的连线也相切。该方法的这些特性，使得它非常适合用了绘制矩形的原角。

使用arcTo()方法：

html:

<!Doctyp html>

<html>

         <head>

                    <title>Rounded Rectangles</title>

<style>

    #canvas{

                     background:lightskyblue;

                     -webkit-box-shadow:4px 4px 8px  rgba(0,0,0,0.5);

                       -moz-box-shadow: 4px  4px 8px rgba(0,0,0,0.5);

                       box-shadow:4px 4px 8px rgba(0,0,0,0.5);

                   } 

   </style>

</head>

      <body>

     <canvas id=‘canvas‘ width=‘575‘  height=‘200‘>

                 canvas not supported

         </canvas>

      <script src=http://www.mamicode.com/‘example.js‘></script>

</body>

</html>

 

example.js

var context = document.getElementById(‘canvas‘).getContext(‘2d‘);

function roundedRect(cornerX, cornerY, width, height, cornerRadius) {
   if (width > 0) context.moveTo(cornerX + cornerRadius, cornerY);
   else           context.moveTo(cornerX - cornerRadius, cornerY);

   context.arcTo(cornerX + width, cornerY,
                 cornerX + width, cornerY + height,
                 cornerRadius);

   context.arcTo(cornerX + width, cornerY + height,
                 cornerX, cornerY + height,
                 cornerRadius);

   context.arcTo(cornerX, cornerY + height,
                 cornerX, cornerY,
                 cornerRadius);

   if (width > 0) {
      context.arcTo(cornerX, cornerY,
                    cornerX + cornerRadius, cornerY,
                    cornerRadius);
   }
   else {
      context.arcTo(cornerX, cornerY,
                    cornerX - cornerRadius, cornerY,
                    cornerRadius);
   }
}

function drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, width, height, cornerRadius) {
   context.beginPath();

   roundedRect(cornerX, cornerY, width, height, cornerRadius);
   
   context.strokeStyle = strokeStyle;
   context.fillStyle = fillStyle;

   context.stroke();
   context.fill();
}

drawRoundedRect(‘blue‘,   ‘yellow‘,  50,  40,  100,  100, 10);
drawRoundedRect(‘purple‘, ‘green‘,  275,  40, -100,  100, 20);
drawRoundedRect(‘red‘,    ‘white‘,  300, 140,  100, -100, 30);
drawRoundedRect(‘white‘,  ‘blue‘,   525, 140, -100, -100, 40);
View Code

 


联系
我们