canvas二次、三次贝赛尔曲线 绘制气泡圆角矩形立体桃心
2024-04-26 12:23:57
绘制气泡
- 二次贝塞尔曲线
- canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
- quadraticCurveTo(cpx，cpy，x，y) 贝塞尔控制点的 x 坐标，贝塞尔控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标。
- 提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
（图片参考：HTML5 canvas quadraticCurveTo() 方法）
// 二次贝塞尔曲线绘制气泡
var canvas=document.querySelector("canvas");
canvas.width=800;
canvas.height=600;
var ctx=canvas.getContext("2d");
draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="teal";//画个气泡ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,62.5);ctx.quadraticCurveTo(25,100,50,100);ctx.quadraticCurveTo(50,120,30,125);ctx.quadraticCurveTo(60,120,65,100);ctx.quadraticCurveTo(125,100,125,62.5);ctx.quadraticCurveTo(125,25,75,25);ctx.stroke();
}
绘制圆角矩形
var canvas=document.querySelector("canvas");
canvas.width=800;
canvas.height=600;
var ctx=canvas.getContext("2d");
draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="teal";ctx.beginPath();// 画个圆角矩形var x=100,y=100;var width=200,height=100;var radius=50;//圆角半径宽度ctx.beginPath();ctx.moveTo(x,y+radius);ctx.lineTo(x,y+height-radius);ctx.quadraticCurveTo(x,y+height,x+radius,y+height);ctx.lineTo(x+width-radius,y+height);ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);ctx.lineTo(x+width,y+radius);ctx.quadraticCurveTo(x+width,y,x+width-radius,y);ctx.lineTo(x+radius,y);ctx.quadraticCurveTo(x,y,x,y+radius);ctx.stroke();
}
绘制立体桃心
- 三次贝塞尔曲线
- canvas bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
- context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 第一个贝塞尔控制点的 x 坐标，第一个贝塞尔控制点的 y 坐标，第二个贝塞尔控制点的 x 坐标， 第二个贝塞尔控制点的 y 坐标， 结束点的 x 坐标， 结束点的 y 坐标。
- 提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
（图片参考：HTML5 canvas quadraticCurveTo() 方法）
var canvas=document.querySelector("canvas");
canvas.width=800;
canvas.height=600;
var ctx=canvas.getContext("2d");
draw();function draw(){ctx.clearRect(0,0,800,600);ctx.lineCap="round";ctx.lineWidth=5;ctx.strokeStyle="rgba(255,0,0,0)";// 加点阴影ctx.shadowOffsetX=3;ctx.shadowOffsetY=3;ctx.shadowBlur=7;//模糊度ctx.shadowColor="#999";// 再带点儿高光-径向渐变var highlight=ctx.createRadialGradient(105,58,5,30,30,180);highlight.addColorStop(0,'#ffffff');highlight.addColorStop(0.3,'tomato');ctx.fillStyle=highlight;//填充桃心颜色西红柿色ctx.beginPath();// 桃心ctx.moveTo(75,40);ctx.bezierCurveTo(75,37,70,25,50,25);ctx.bezierCurveTo(20,25,20,62.5,20,62.5);ctx.bezierCurveTo(20,80,40,102,75,120);ctx.bezierCurveTo(110,102,130,80,130,62.5);ctx.bezierCurveTo(130,62.5,130,25,100,25);ctx.bezierCurveTo(85,25,75,37,75,40);ctx.stroke();ctx.fill();//把颜色填充进去
}
canvas二次、三次贝赛尔曲线 绘制气泡圆角矩形立体桃心相关推荐
- 定义由4条线和4个圆弧组成的Box类，绘制一个圆角矩形（可填充）。
最终效果: //定义由4条线和4个圆弧组成的Box类,绘制一个圆角矩形. #include"../实践/GUI/Simple_window.h" #include"GU ...
- 画正方形圆角android,Android 快速绘制一个圆角矩形的实例
android 开发过程中,经常需要绘制一些简单的颜色图形.下面贴上一段最简单的图形. @H_301_4@圆角矩形: @H_301_4@res\drawable\shape_small_label.x ...
- 【Canvas】绘制表格+圆角矩形色块
效果: 像这种简单的表格完全可以实现,这里只当入门canvas示例观看即可 代码: <!DOCTYPE html> <html> <head> <meta c ...
- Android 快速绘制一个圆角矩形
android 开发过程中, 经常需要绘制一些简单的颜色图形.下面贴上一段最简单的图形. 圆角矩形: res\drawable\shape_small_label.xml <?xml versi ...
- android paint 圆角 绘制_android 绘制椭圆 圆角矩形 详细解析
1.前几天看别人博客上的一个自定义视图时,看到了一个空心圆环,然后学习了下,把自己理解的 函数参数的 方法跟大家说下,下面是一个自己做的简单例子 1.绘制矩形 RectF rect1 = aaane ...
- 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...
- 微信小程序 canvas圆角矩形的绘制
微信小程序允许对普通元素通过 border-radius的设置来进行圆角的绘制,但有时候在使用 canvas绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方法就 ...
- php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训，室内设计，web前端，影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
- canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
最新文章
- Spread for Windows Forms高级主题(3)---单元格的编辑模式
- Ackerman 函数-奇怪的函数
- 安装jdk后出现bash: ./java: /lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录
- 【小摘抄】关于C++11下 string各类用法（持续更新）
- ORM框架之Mybatis（二）数据库连接池、事务及动态SQL
- WIFI 802.11协议传输速率
- 使用html链接上传木马,一段植入木马的html代码
- 计算机科学导论第一章练习解答
- JavaEE简易聊天室（Netbeans：Servlet+Cookie+Session）
- Google 谷歌网页搜索, 学术搜索
- 昭和女神异闻录——中山美穗
- 数据库的一些基本语法一
- PDF限制编辑怎么解决
- 几种常见的软件授权模式
- 开源OSSIM企业运维疑难问题解析
- 无线局域网和搭建拓扑学习
- 音频相概念扫盲——声音处理的过程
- 常见积分和导数的推导
- 程序员锻炼腰部几个简单的方法
- 基于springboot垃圾分类网站