canvas制作圆角矩形（包括填充矩形的功能）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canvas制作圆角矩形（包括填充矩形的功能）</title>
</head><body><canvas id="myCanvas" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>window.onload = function() {var myCanvas = document.getElementById("myCanvas"); //获取canvas对象  if (myCanvas.getContext("2d")) { //判断浏览器是否支持canvas标签  //设置canvas的宽度和高度  myCanvas.width = 400;myCanvas.height = 200;var context = myCanvas.getContext("2d"); //获取画布context的上下文环境  //绘制一个圆角矩形  strokeRoundRect(context, 10, 10, 100, 50, 10);  //绘制并填充一个圆角矩形  fillRoundRect(context, 200, 10, 100, 50, 10, 'rgba(0,0,0,0.7)');} else {alert("您的浏览器不支持canvas，请换个浏览器试试");}};/**该方法用来绘制一个有填充色的圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param fillColor:填充颜色 **/function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {//圆的直径必然要小于矩形的宽高          if (2 * radius > width || 2 * radius > height) { return false; }cxt.save();cxt.translate(x, y);//绘制圆角矩形的各个边  drawRoundRectPath(cxt, width, height, radius);cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值  cxt.fill();cxt.restore();}/**该方法用来绘制圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param lineWidth:线条粗细 *@param strokeColor:线条颜色 **/function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {//圆的直径必然要小于矩形的宽高          if (2 * radius > width || 2 * radius > height) { return false; }cxt.save();cxt.translate(x, y);//绘制圆角矩形的各个边  drawRoundRectPath(cxt, width, height, radius);cxt.lineWidth = lineWidth || 2; //若是给定了值就用给定的值否则给予默认值2  cxt.strokeStyle = strokeColor || "#000";cxt.stroke();cxt.restore();}function drawRoundRectPath(cxt, width, height, radius) {cxt.beginPath(0);//从右下角顺时针绘制，弧度从0到1/2PI  cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);//矩形下边线  cxt.lineTo(radius, height);//左下角圆弧，弧度从1/2PI到PI  cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);//矩形左边线  cxt.lineTo(0, radius);//左上角圆弧，弧度从PI到3/2PI  cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);//上边线  cxt.lineTo(width - radius, 0);//右上角圆弧  cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);//右边线  cxt.lineTo(width, height - radius);cxt.closePath();}</script>
</body></html>

canvas制作圆角矩形（包括填充矩形的功能）相关推荐

canvas 圆角矩形填充_canvas制作圆角矩形（包括填充矩形的功能）
canvas制作圆角矩形(包括填充矩形的功能) 您的浏览器不支持 HTML5 canvas 标签. window.onload = function() { var myCanvas = docume ...
HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
canvas应用——圆角矩形图片
前段时间写了一个canvas应用--将方形图片处理为圆形 ,最近就想把这个完善一下,所以就再补充一个canvas的圆角矩形处理方式. 例子你可以直接点击此处查看例子 ,先一睹为快. 参数参数默 ...
JavaScript 使用canvas绘制圆角矩形边框
目录分析完整代码如下前言在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形分析 Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实 ...
PS 如何制作圆角矩形图片
一.制作圆角图片运行Photoshop CS3,打开一张图用来制作圆角图片. 选择圆角矩形工具在圆角矩形工具中选择路径选项圆角矩形的半径,可以设置为20-30 在图片中拉出圆角在右下角的图层面 ...
PS如何制作圆角矩形图片
一.制作圆角图片运行Photoshop CS3,打开一张图用来制作圆角图片. 选择圆角矩形工具在圆角矩形工具中选择路径选项圆角矩形的半径,可以设置为20-30 在图片中拉出圆角在右下角的图层面 ...
微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
css制作圆角矩形,CSS绘制圆角矩形图形的效果
我们在给矩形的四角进行圆角处理时,我们早期,都是采用片图来完成,这无疑是给网页的加载增加了负担,大量的图片载入在网页里,流量消耗,对手机用户是一刺痛的.给网页及APP的加载速度,无疑是我们一直研究的方 ...
android开源项目---RoundedImageView制作圆角矩形，椭圆形以其圆形控件
一.项目概述在项目中美工提供给我们的图片通常是矩形的,我们如何把矩形的图片做成圆角矩形.椭圆形以其圆形效果的图形显示效果,这就是我这篇文章要讲的内容. 效果如下: 我这里使用的是开源项目 Roun ...
unity 使用超椭圆方程对图片进行裁切制作圆角矩形
今天无意间在网上发现了一个公式,叫做超椭圆方程,效果就是圆角矩形: 原文地址: http://blog.csdn.net/tom_221x/article/details/50924154 原文中是使 ...

canvas制作圆角矩形（包括填充矩形的功能）

canvas制作圆角矩形（包括填充矩形的功能）相关推荐

最新文章

热门文章