html5canvas圆角矩形,html5 canvas 绘制圆角矩形
您的位置:首页 - 教程 - HTML5 - 正文
html5 canvas 绘制圆角矩形
html5没有圆角矩形的绘制函数,不过可以通过arc和line组合成圆角矩形,或者quadraticCurveTo和lineTo组合成圆角矩形。
下面是示例代码:
//-------------------------------------
/**
* 绘制圆角矩形,用arc和LineTo函数
*/
function roundRectanglePath(context,rect,radius)
{
context.beginPath();
context.moveTo( rect.getX()+radius,rect.getY() );
context.lineTo( rect.getRight()-radius,rect.getY() );
context.arc( rect.getRight()-radius,rect.getY()+radius, radius, 3*Math.PI/2,2*Math.PI, false);
context.lineTo( rect.getRight(),rect.getBottom()-radius);
context.arc( rect.getRight()-radius,rect.getBottom()-radius, radius, 0, Math.PI/2, false);
context.lineTo( rect.getX()+radius,rect.getBottom() );
context.arc( rect.getX()+radius,rect.getBottom()-radius, radius, Math.PI/2, Math.PI, false);
context.lineTo( rect.getX(),rect.getY()+radius);
context.arc( rect.getX()+radius,rect.getY()+radius, radius,Math.PI, 3*Math.PI/2, false);
context.closePath();
}
/**
* 绘制圆角矩形,用quadraticCurveTo和lineTo函数
*/
function roundRectanglePath2(context,rect,radius)
{
context.beginPath();
context.moveTo( rect.getX()+radius,rect.getY() );
context.lineTo( rect.getRight()-radius,rect.getY() );
context.quadraticCurveTo( rect.getRight(), rect.getY(), rect.getRight(), rect.getY() + radius);
context.lineTo( rect.getRight(),rect.getBottom()-radius);
context.quadraticCurveTo( rect.getRight(), rect.getBottom(), rect.getRight()-radius, rect.getBottom());
context.lineTo( rect.getX()+radius,rect.getBottom() );
context.quadraticCurveTo( rect.getX(), rect.getBottom(), rect.getX(), rect.getBottom()-radius);
context.lineTo( rect.getX(),rect.getY()+radius);
context.quadraticCurveTo( rect.getX(), rect.getY(), rect.getX()+radius, rect.getY());
context.closePath();
}
//这是两个函数用到的矩形对象------------------------------------
function Rect(x,y,width,height)
{
this.x = x;
this.y = y;
this.width = width;
this.height= height;
}
Rect.prototype.getX = function()
{
return this.x;
}
Rect.prototype.getY = function()
{
return this.y;
}
Rect.prototype.getWidth = function()
{
return this.width;
}
Rect.prototype.getHeight = function()
{
return this.height;
}
Rect.prototype.getLeft = function()
{
return this.x;
}
Rect.prototype.getTop = function()
{
return this.y;
}
Rect.prototype.getRight = function()
{
return (this.x + this.width);
}
Rect.prototype.getBottom = function()
{
return (this.y + this.height);
}
//----------------------------------------
评论:
html5canvas圆角矩形,html5 canvas 绘制圆角矩形相关推荐
- html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法 发布时间:2020-08-29 11:23:12 来源:亿速云 阅读:102 作者:小新 这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- 小程序 uni canvas绘制圆角图片 圆角矩形
小程序 uni canvas绘制圆角图片 圆角矩形 获取canvas的宽度保证适应屏幕 uni.getSystemInfo({success: (res)=> { // res - 各种参数le ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- WPF使用Canvas绘制可变矩形
WPF使用Canvas绘制可变矩形 原文:WPF使用Canvas绘制可变矩形 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/WANGYAN9110/ ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象 ...
- html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
- html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
最新文章
- Java小工具:TimingTools
- python可以干什么-Python可以用来做什么 为你揭开python神秘面纱
- php cookie加密 类,PHP cookie加密类
- 『C++』我想学C++,C++太难了,那我想入门,给我10分钟我带你入门
- 从无到有:阿里巴巴中国站手机客户端项目设计
- 关于在ItemAdding时获取“用户和用户组”这个栏的值
- Javascript:ES6模块化开发报错:Uncaught SyntaxError: Cannot use import statement outside a module
- svm图片多分类python代码_[OpenCV随笔]-OpenCV3.x中SVM多分类使用(代码篇)
- jlink6.80a烧写序列号(serial number)问题记录
- 将word文档锁定其他用户不可编辑
- 一篇很感人的DOTA小说--我本近卫
- 香港大屿山祈福线路攻略
- SCUT01在线协作白板技术解决方案
- JAVA整合Milvus矢量数据库及数据
- [UE4]传送门:场景切换
- XIlinx MIG 控制DDR3 SO-DIMM内存条(二):MIG IP核学习
- 小程序 canvas 实现电子签名
- Arduino应用开发——OTA(通过网络升级)
- 远程调试工具之weinre
- 【time series】时间序列领域的Transformer综述论文笔记
热门文章
- aruba交换机配置命令_aruba配置手册
- 使用MybatisPlus从MySQL切换到SQLServer的坑
- GNSS原理及技术(一)——GNSS现状与发展
- 古训良言 之 一百四十八
- 一次关于架构的“嘴炮”
- 阿里p9 Python工程师,进阶书籍推荐
- 数学建模·层次分析法基本步骤及参考代码
- 中国风背景素材|2020设计趋势之中国风
- WiFi大师小程序3.0.9独立版源码
- 怎样显示计算机联网密码错误,我的笔记本电脑连接wifi时总显示密码不对,但密码是对的!应当怎么弄...