<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>畫一個圓角圖</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript"><!--
$(function(){
var elem = $("#myCanvas")[0];
if (!elem || !elem.getContext) {
return;
}
//CanvasRenderingContext2D
var ctx = elem.getContext('2d');
ctx.fillStyle = '#00f';
ctx.strokeStyle = '#0f0';
ctx.lineWidth = 10;
ctx.globalAlpha = 1;
//lineCap指定線條的末端如何繪製,round這個值指定了線段應該帶有一個半圓形的線帽，半圓的直徑等於線段的寬度，並且線段在端點之外擴展了線段寬度的一半。
ctx.lineCap = "round";
//lineJoin 屬性說明如何繪製交點。值 "round" 說明定點的外邊緣應該和一個填充的弧接合，這個弧的直徑等於線段的寬度。"
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.lineTo(200, 200);
ctx.lineTo(10, 200);
ctx.lineTo(10, 10);
//ctx.fill();
ctx.stroke();
ctx.closePath();
});
// --></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持HTML5元素</canvas>
</body>
</html>
