canvas系列教程02——圆、弧线、圆角矩形、曲线（气泡、心形、N叶草）、扇形

最新推荐文章于 2022-10-21 09:46:58 发布
最新推荐文章于 2022-10-21 09:46:58 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： # HTML # 已归档链接 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/124339528
版权

此系列教程层层递进，建议按顺序阅读

圆 arc()

cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
cxt.closePath();
  • (x,y)为圆心坐标
  • 开始和结束角度的单位为弧度，推荐写法如下：
120*Math.PI/180   //120°
150*Math.PI/180   //150°
  • anticlockwise表示绘制方向，布尔值
    —— true 逆时针
    —— false 顺时针（默认值）
    在这里插入图片描述
             //半圆
             cxt.beginPath();
             cxt.arc(80, 80, 50, 0, 180*Math.PI/180, true);
             cxt.closePath();
             //描边
             cxt.strokeStyle = "HotPink";
             cxt.stroke();
             //整圆
             cxt.beginPath();
             cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true);
             cxt.closePath();
             //描边
             cxt.strokeStyle = "HotPink";
             cxt.stroke();

在这里插入图片描述

             cxt.beginPath();
             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
             cxt.closePath();
             cxt.strokeStyle = "HotPink";
             cxt.stroke();

在这里插入图片描述

             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false);

在这里插入图片描述

             //半圆
             cxt.beginPath();
             cxt.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
             cxt.closePath();
             //填充
             cxt.fillStyle = "HotPink";
             cxt.fill();
             //整圆
             cxt.beginPath();
             cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180, true);
             cxt.closePath();
             //填充
             cxt.fillStyle = "#9966FF";
             cxt.fill();

在这里插入图片描述

弧线

方法一 arc() 绘制

//状态描述
cxt.beginPath();
cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise);
//描边
cxt.strokeStyle = "颜色值";
cxt.stroke();

和圆一样，使用arc()，但不需要关闭路径！ （即没有 cxt.closePath()）
在这里插入图片描述

             cxt.beginPath();
             cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
             cxt.stroke();

在这里插入图片描述

stroke()和fill()这两个方法只能绘制当前路径，不能同时绘制几个路径。

             //绘制一条直线
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             cxt.stroke();

             //绘制圆弧+直线
             cxt.beginPath();
             cxt.arc(70,70,50,0,-90*Math.PI/180,true);
             cxt.moveTo(120,70);
             cxt.lineTo(120,120);
             cxt.stroke();

在这里插入图片描述

             //绘制一条直线
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             // cxt.stroke();  注释掉之后，此直线不会绘制

             //绘制圆弧+直线
             cxt.beginPath();
             cxt.arc(70,70,50,0,-90*Math.PI/180,true);
             cxt.moveTo(120,70);
             cxt.lineTo(120,120);
             cxt.stroke();

在这里插入图片描述

方法二 arcTo() 绘制

cxt.arcTo(cx,cy,x2,y2,radius);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标
  • radius 是圆弧半径
    在这里插入图片描述
    arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果开始点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。也就是说，开始点坐标并不一定是弧线起点坐标。
             cxt.moveTo(20,20);
             cxt.lineTo(70,20);
             cxt.arcTo(120,20,120,70,50);
             cxt.lineTo(120,120);
             cxt.stroke();

在这里插入图片描述

             cxt.moveTo(20,20);
             // cxt.lineTo(70,20);  注释掉后，仍会画直线！
             cxt.arcTo(120,20,120,70,50);
             cxt.lineTo(120,120);
             cxt.stroke();

在这里插入图片描述

圆角矩形

方法一 直线和弧线拼接

             cxt.moveTo(40,20);
             cxt.lineTo(160,20);
             cxt.arcTo(180,20,180,40,20);
             cxt.moveTo(180,40);
             cxt.lineTo(180,110);
             cxt.arcTo(180,130,160,130,20);
             cxt.moveTo(160,130);
             cxt.lineTo(40,130);
             cxt.arcTo(20,130,20,110,20);
             cxt.moveTo(20,110);
             cxt.lineTo(20,40);
             cxt.arcTo(20,20,40,20,20);
             cxt.stroke();

在这里插入图片描述

方法二 封装一个专门绘制圆角矩形的函数

        /*
         * createRoundedRect()用于绘制圆角矩形
         * width、height：分别表示长和宽
         * r：表示圆角半径
         * offsetX、offsetY：分别表示左上角顶点坐标
         */
        function createRoundedRect(cxt, width, height, r, offsetX, offsetY) {
             cxt.beginPath();
             cxt.moveTo(offsetX + r, offsetY);
             cxt.lineTo(offsetX + width - r, offsetY);
             cxt.arcTo(offsetX + width, offsetY, offsetY + width, offsetY + r, r);
             cxt.lineTo(offsetX + width, offsetY + height - r);
             cxt.arcTo(offsetX + width, offsetY + height, offsetX + width - r, offsetY + height, r);
             cxt.lineTo(offsetX + r, offsetY + height);
             cxt.arcTo(offsetX, offsetY + height, offsetX, offsetY + height - r, r);
             cxt.lineTo(offsetX, offsetY + r);
             cxt.arcTo(offsetX, offsetY, offsetX + r, offsetY, r);
             cxt.closePath();
        }

             createRoundedRect(cxt, 100, 100, 20, 20, 20);
             cxt.fillStyle = "HotPink";
             cxt.fill();

在这里插入图片描述

曲线

从理论上来说，任何复杂的图形都可以用贝塞尔曲线绘制出来

二次贝塞尔曲线

二次贝塞尔曲线有一个控制点，只能向一个方向弯曲

cxt.quadraticCurveTo(cx , cy , x2,y2);

一般由moveTo()或lineTo()提供开始点

  • cx,cy 为控制点坐标
  • x2,y2 为结束点坐标
    在这里插入图片描述
    绘制原理可以参考下图：
    在这里插入图片描述
             cxt.moveTo(30, 120);
             cxt.quadraticCurveTo(100, 20, 160, 120);
             cxt.stroke();

在这里插入图片描述

实战范例：气泡

             cxt.moveTo(75, 25);
             cxt.quadraticCurveTo(25, 25, 25, 62);
             cxt.quadraticCurveTo(25, 100, 50, 100);
             cxt.quadraticCurveTo(50, 120, 30, 125);
             cxt.quadraticCurveTo(60, 120, 65, 100);
             cxt.quadraticCurveTo(125, 100, 125, 62);
             cxt.quadraticCurveTo(125, 25, 75, 25);
             cxt.stroke();

在这里插入图片描述

三次贝塞尔曲线

三次贝塞尔曲线有两个控制点，可以绘制出波浪线

cxt.bezierCurveTo(cx1 , cy1 , cx2 , cy2 , x , y);

一般由moveTo()或lineTo()提供开始点

  • cx1,cy1 为控制点1的坐标
  • cx2,cy2 为控制点2的坐标
  • x,y 为结束点坐标
    在这里插入图片描述
    绘制原理可参考下图：
    在这里插入图片描述
             //绘制三次贝塞尔曲线
             cxt.moveTo(20, 80);
             var cx1 = 20;
             var cy1 = 20;
             var cx2 = 120;
             var cy2 = 120;
             var endX = 120;
             var endY = 60;
             cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY);
             cxt.stroke();

在这里插入图片描述

实战范例：心形

             cxt.moveTo(75, 40);
             cxt.bezierCurveTo(75, 37, 70, 25, 50, 25);
             cxt.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
             cxt.bezierCurveTo(20, 80, 40, 102, 75, 120);
             cxt.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
             cxt.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
             cxt.bezierCurveTo(85, 25, 75, 37, 75, 40);
             cxt.stroke();

在这里插入图片描述

实战范例：N叶草

        /*
         * createLeaf()用于绘制N叶草
         * n：n片
         * dx、dy：叶子中心位置的坐标
         * size：控制叶子的大小
         * length：控制叶子长度
         */
        function createLeaf(cxt, n, dx, dy, size, length) {
             cxt.beginPath();
             cxt.moveTo(dx, dy + size);
             var degree = 2 * Math.PI / n;
             for (var i = 1; i < n + 1; i++) {
                  //计算控制点的坐标
                  var cx1 = Math.sin((i - 1) * degree) * length + dx;
                  var cy1 = Math.cos((i - 1) * degree) * length + dy;
                  var cx2 = Math.sin(i * degree) * length + dx;
                  var cy2 = Math.cos(i * degree) * length + dy;
                  //计算结束点的坐标
                  var x = Math.sin(i * degree) * size + dx;
                  var y = Math.cos(i * degree) * size + dy;
                  cxt.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
             }
             cxt.closePath();
        }

             createLeaf(cxt, 4, cnv.width/2, cnv.height/2, 20, 80);
             //定义填充颜色为浅绿色
             cxt.fillStyle = "#00FF99";
             cxt.fill();

在这里插入图片描述

扇形

封装绘制扇形的函数 createSector

        function createSector(cxt, x, y, r, angle1, angle2) {
             cxt.beginPath();
             cxt.moveTo(x, y);
             cxt.arc(x, y, r, angle1 * Math.PI / 180, angle2 * Math.PI / 180, false);
             cxt.closePath();
        }

             createSector(cxt, cnv.width / 2, cnv.height / 2, 50, 30, 120);
             cxt.fillStyle = "HotPink";
             cxt.fill();

在这里插入图片描述

朝阳39
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
08-29
主要介绍了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法,结合实例形式分析了Android自定义view绘制圆角矩形的相关方法与使用技巧,需要的朋友可以参考下
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
weixin_68908760的博客
12-19 987
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
android 使用canvas把矩形图片变成圆角矩形显示
07-12
android 使用canvas把矩形图片变成圆角矩形显示 参考网址：http://blog.csdn.net/rhljiayou/article/details/7212620
canvas 画圆
吴清钺的博客
05-27 1117
一个半圆+一个小圆 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;填充纹理&lt;/title&gt; &lt;/head&gt; &lt;style&gt; &l
详述Canvas(五)/绘制圆角矩形
細水、長流√的专栏
02-23 9418
之前做的react项目 做了一个分享图片功能，分享的图片上有二维码，和个人信息等内容，二维码用的 qrcode.react 组件，但是图片上的元素必须要用canvas 绘制上去，canvas api 好久之前看过，但是基本没用过，忘的也七七八八了，临阵抱佛脚！ 其中用到了一个绘制圆角矩形的 方法，搜索之后找到了这篇文章，写的很不错， 附带原文链接https://blog.csdn.net/liuyan19891230/article/details/51259147 Canvas并没有提供绘制圆角矩形的.
在Canvas中绘制圆角矩形
热门推荐
Sarkuya的编程园地
11-12 4万+
本文剖析了 Canvas API 中 arc 及 arcTo 函数的特征，并分别使用它们实现了 Canvas API 中所未提供的绘制圆角矩形的功能。
Canvas绘制圆角矩形
KenThomas的博客
07-25 320
原文https://m.jb51.net/html5/442924.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>2048游戏界面</title> <style> body { background: url("./images/bg3.jpg")
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
09-28
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的...而本文讲的圆角矩形则只有通过其他方法模拟出来,我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成,感兴趣的朋友可以了解下
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
09-28
主要介绍了使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例,作者举了2048小游戏和微信对话框两个实用的例子来作为操作Canvas API的实用练习推荐,需要的朋友可以参考下
详解微信小程序canvas圆角矩形的绘制的方法
10-18
主要介绍了详解微信小程序canvas圆角矩形的绘制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas画圆角矩形
weixin_40820061的博客
08-03 321
/** * 画圆角矩形 * @param {*} ctx * @param {*} x 圆角矩形起始坐标x * @param {*} y 圆角矩形起始坐标y * @param {*} width 矩形宽度 * @param {*} height 矩形高度 * @param {*} r 矩形圆角 * @param {*} color 矩形填充颜色 */ function drawRoundedRectan.
canvas画带圆角矩形
李大人的博客
10-21 1396
canvas画矩形
canvas 圆角矩形填充_canvas 绘制圆角矩形
weixin_33765593的博客
02-23 132
canvas #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } window.onload=function(){var context = document.getElementById('canvas').getContext('2d')fill在很理...
canvas 圆角矩形填充_Canvas 学习2 (矩形,虚线矩形,圆角矩形)
weixin_36307713的博客
12-30 231
1 draw() {2 /** @type {HTMLCanvasElement}*/3 var canvas = document.getElementById("tutorial");4 var ctx = canvas.getContext("2d");5 canvas.width =document.documentElement.clien...
canvas-圆形
十里夜
02-06 427
canvas-圆形 #canvas{ border: 1px solid palevioletred; } window.onload = function (){ //获取到canvas元素 var canvas = document.getElementBy
canvas画布 矩形圆角
Khun_HWJ的博客
05-26 1194
//canva 画布音频-视频圆角 function drawRoundRect(ctx, x, y, width, height, radius){ ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.lineTo(width - radius + x, y); ctx.arc(width - radius + x, radius .
canvas-曲线
weixin_54057363的博客
03-08 136
canvas曲线-arc()方法&arcTo()方法
玩转canvas之实现一个圆角矩形
weixin_45449964的博客
05-10 2406
使用canvas封装一个绘制圆角矩形的方法代码原理思路分析讲解缺陷改进改进圆角非正规圆角的问题改进后的代码实现的圆角改进圆角过大的问题总结完整代码 在canvas中绘制一个矩形是非常简单的，使用canvas的rect()方法即可，但是没有办法绘制一个带圆角的矩形，如图： 代码 class DrawBoard extends BasicCanvas{ constructor(c){ super(c) } // 如何绘制带圆角的矩形 createRect(x,y,w,h,r = 0,{
使用 canvas 画圆
雾里看花叹朦胧
12-25 654
使用原生的 HTML5 和 JS ，在屏幕中动态生成随机的 50 个小圆：arc()画圆弧的方法： context.arc(x,y,r,sAngle,eAngle,counterclockwise); arc(圆心的x坐标，圆心的y坐标，圆的半径，起始角（以弧度计，即l圆心的3点钟位置是0度），结束角，规定应该是顺时针还是逆时针画图)其中最后一个参数是可选的，true=逆时针，false =顺时
android canvas 圆角矩形
最新发布
11-25
以下是在Android中使用Canvas将矩形图片变成圆角矩形的步骤： 1.创建一个Bitmap对象，将需要变成圆角矩形的图片加载到该对象中。 2.创建一个新的Bitmap对象，该对象将用于绘制圆角矩形。 3.创建一个Canvas对象，将新的Bitmap对象传递给该对象。 4.创建一个Paint对象，设置Paint对象的颜色和样式。 5.创建一个RectF对象，该对象将用于绘制圆角矩形。 6.使用Canvas对象的drawRoundRect()方法绘制圆角矩形。 7.使用Canvas对象的drawBitmap()方法将原始Bitmap对象绘制到新的Bitmap对象上。 8.使用ImageView对象显示新的Bitmap对象。 下面是示例代码： ```java // 加载需要变成圆角矩形的图片 Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); // 创建一个新的Bitmap对象 Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); // 创建一个Canvas对象 Canvas canvas = new Canvas(output); // 创建一个Paint对象 Paint paint = new Paint(); paint.setAntiAlias(true); // 创建一个RectF对象 RectF rectF = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()); // 绘制圆角矩形 canvas.drawRoundRect(rectF, 50, 50, paint); // 设置PorterDuffXfermode模式 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); // 绘制Bitmap对象 canvas.drawBitmap(bitmap, null, rectF, paint); // 显示新的Bitmap对象 ImageView imageView = (ImageView) findViewById(R.id.image_view); imageView.setImageBitmap(output); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值