HTML5 canvas画圆角框
<!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");if (!elem || !elem.getContext) {return;}//CanvasRenderingContext2Dvar 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>http://dl.iteye.com/upload/attachment/211381/430a59b6-015d-3fda-bde0-1f266ba479ab.gif
页:
[1]