canvas绘图，绘制圆角矩形。圆角线条。圆形头像

//绘制圆角矩形

//x。x坐标，y，y轴坐标。width宽 height高 radius圆角（一定不能大于height的一半，否则不显示） fillColor填充颜色。borderColor线条颜色
       fillRoundRect(cxt, x, y, width, height, radius, fillColor,borderColor) {
           //圆的直径必然要小于矩形的宽高
           if (2 * radius > width || 2 * radius > height) {
               return false;
           }

cxt.save();
           cxt.translate(x, y);
           //绘制圆角矩形的各个边
           this.drawRoundRectPath(cxt, width, height, radius,borderColor);
           cxt.fillStyle = fillColor || '#fff'; //若是给定了值就用给定的值否则给予默认值
           cxt.fill();
           cxt.restore();
       },

//绘制圆角线条
        //width宽 height高 radius圆角。borderColor线条颜色
       drawRoundRectPath(cxt, width, height, radius,borderColor) {
       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.strokeStyle = borderColor || '#fff';
       cxt.lineWidth=1;
       cxt.stroke();
       cxt.closePath();
   },

//画圆形头像

//url头像路径 x：x轴坐标 y:y轴坐标，width宽 height高
           drawCircular(ctx, url, x, y, width, height) {
               var avatarurl_width = width;
               var avatarurl_heigth = height;
               var avatarurl_x = x;
               var avatarurl_y = y;
               ctx.save();
               ctx.beginPath();
               ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
               ctx.clip();
               ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
               ctx.restore();
           },

调用。

绘制圆角矩形 this.fillRoundRect(ctx,23,45,165,75,36, "red","#fff")

绘制圆角的线条 this.drawRoundRectPath(ctx,23,45,165,75,36, "red")

绘制圆形头像that.drawCircular(ctx, "../asset/avater.png", 28,20 ,53,53)

canvas绘图，绘制圆角矩形。圆角线条。圆形头像相关推荐

html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
Glide加载常用类型图片（带白色边框的圆形图、圆角矩形图片、圆形图片）
一:依赖包: Glide_github implementation 'com.github.bumptech.glide:glide:4.8.0' annotationProcessor 'com. ...
html 圆角矩形,圆角矩形
图示分析(r是半径) ![](https://box.kancloud.cn/178f077e36ad03730a5e39ad656f22f2_330x262.jpg) 一目了然,有过数学基础的应该很 ...
【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录一.盒子模型圆角边框二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例一.盒子模型圆角边框在 CS ...
android 清空canvas部分内容_Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢? 好,接下来本文通过三种方式来实现这种效果! 注意:这是 ...
使用Glide加载圆角矩形图片、圆形图片
Glide是一个功能强大的图片加载库,下面是平常开发中使用到的一些功能,基于Glide-4.X版本的用法 Glide-github地址 Glide jar包下载地址加载圆形图片: RequestOp ...
android圆角glide,使用Glide加载圆角矩形图片、圆形图片
Glide是一个功能强大的图片加载库,下面是平常开发中使用到的一些功能,基于Glide-4.X版本的用法 Glide-github地址 Glide jar包下载地址加载圆形图片:RequestOpt ...
在Canvas中绘制圆角矩形
问题的提出要在Canvas中绘制一个矩形,使用strokeRect或fillRect函数即可. var canvas = document.getElementById("canvas&q ...
玩转canvas之实现一个圆角矩形
使用canvas封装一个绘制圆角矩形的方法代码原理思路分析讲解缺陷改进改进圆角非正规圆角的问题改进后的代码实现的圆角改进圆角过大的问题总结完整代码在canvas中绘制一个矩形 ...
app图标圆角角度_怎样使用sketch绘制标准APP图标圆角矩形背景？
主要是做UI设计时ICON背景板的一些操作方式,例如以下图标的背板.可以看出不单单是圆角矩形,而是有点胖胖的圆角矩形,那这种矩形要怎么简便省时的操作. 用sketch绘制的效果我简单会分为3种常见背板 ...

canvas绘图，绘制圆角矩形。圆角线条。圆形头像

canvas绘图，绘制圆角矩形。圆角线条。圆形头像相关推荐

最新文章

热门文章