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