html5中arcto,HTML5 canvas 中的arcTo()方法的用法

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

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

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

使用arcTo()方法：

html:

Rounded Rectangles

#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);

}

height=‘200‘>

canvas not supported

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

原文：http://www.cnblogs.com/zxmeigood/p/3725193.html