標籤：style blog class code c tar
除了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=‘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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
