html5做圆角

最新推荐文章于 2021-08-11 16:12:02 发布

飞歌

最新推荐文章于 2021-08-11 16:12:02 发布

阅读量3.6k

点赞数

文章标签： html5 function 浏览器扩展

本文链接：https://blog.csdn.net/chen__jinfei/article/details/6519804

版权

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

关注