html5做圆角

来源：互联网发布：淘宝上的补漆笔好用吗编辑：程序博客网时间：2024/04/28 07:07

<!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>