画正圆角矩形 - HTML5 Canvas 作图

最新推荐文章于 2022-05-12 16:08:26 发布
最新推荐文章于 2022-05-12 16:08:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： HTML 5 Canvas 应用开发者指南 JavaScript 金海龙 画圆角矩形 文章标签： html5 google 浏览器 function c html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTMLCanvas/article/details/7860230
版权

function DrawRoundRect(Canvas,P1,P2,Radius)
功能：画正圆角矩形
参数：P1：矩形左上角坐标；P2：矩形右下角坐标；
Radius：圆角大小

源代码：

function DrawRoundRect(Canvas,P1,P2,Radius)
{
//画个圆角矩形
var A=new Array(Math.min(P1[0],P2[0]),Math.min(P1[1],P2[1]));
var C=new Array(Math.max(P1[0],P2[0]),Math.max(P1[1],P2[1]));
var B=new Array(A[0],C[1]);
var D=new Array(C[0],A[1]);
Canvas.beginPath();
var P=new Array(A[0],A[1]+Radius);
DrawArcTo(Canvas,P,B,C,Radius);
var P=new Array(B[0]+Radius,B[1]);
DrawArcTo(Canvas,P,C,D,Radius);
var P=new Array(C[0],C[1]-Radius);
DrawArcTo(Canvas,P,D,A,Radius);
var P=new Array(D[0]-Radius,D[1]);
DrawArcTo(Canvas,P,A,B,Radius);

Canvas.stroke();
/*
Canvas.beginPath();
DrawAOBArc(Canvas,C,D,A,Radius);
Canvas.stroke();
Canvas.beginPath();
DrawAOBArc(Canvas,D,A,B,Radius);
Canvas.stroke();
Canvas.endPath();
*/
}

实例：
<html>
<script type="text/javascript" src="bigengineer.js"></script>
<body><canvas id="cc" width="2000" height="2000"></canvas>
<script type="text/javascript">
var c=document.getElementById("cc");
var hb=c.getContext("2d");

var A=new Array(55,55);
var C=new Array(150,150);

hb.beginPath();
hb.strokestyle="#000000";
DrawRoundRect(hb,A,C,10);
hb.stroke(); 
hb.endPath();
</script>
</body>
</html>
用Google浏览器浏览的效果如下：

如果Radius设置的太大，那么就能画出意想不到的图片，例如：
……
DrawRoundRect(hb,A,C,80);//把Radius设置成80
hb.stroke(); 
……
用Google浏览器浏览的效果如下：

……
DrawRoundRect(hb,A,C,100);//把Radius设置成100
hb.stroke(); 
……
用Google浏览器浏览的效果如下：

本文节选自我金海龙2010年写的《 HTML5 Canvas 作图函数库2.0版本.pdf 》,

在HTML5刚登陆中国大陆的时候，奇缺权威资料，我及时写作，刚一发布，就引起了关注，也成为被盗版的目标，当你们在Google搜索：HTML5 作图 就可以看到我金海龙作品的排名。

这正说明了我的编程实力。

再接再厉，做完一个版本、开发完一次，才能觉得不完美。

我最近正在写作《HTML 5 Canvas应用开发者指南》，写完一章节，就发布在我金海龙的个人主页上，

在我个人博客上只发表其中一些部分段落，写写感想，或者其它的，只要我有时间的话。

HTMLCanvas
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
01-19
圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。 因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。 JavaScript Code复制内容到剪贴板 <!DOCTYPE html>    <html lang=zh>    <head>        <meta charset=UTF-8>        <title>圆角矩形</title>        <style>            body { background: url(./images/bg3.jp
html5 h5使用canvas 画一个圆角矩形
twinkle的博客
05-16 1846
使用canvas画圆角矩形 （4条边， 4个角） ctx.moveTo 先设置起点A点 下面的（x,y）是B点， （x1, y1）是C点 方向，往哪边边拐 ctx.arcTo(x, y, x1, y1, 圆角大小) B点是A点与C点在圆弧上切线的交点， <canvas id="can" width="500" height="300"></canvas> <script> var canvas = document.getElementById('can'
html5中canvas通过js绘制圆角矩形
第三眼的思绪
05-12 1268
添加绘制圆角矩形的方法，核心代码如下：/** * x 起始X坐标(必须) * y 其实Y坐标(必须) * w 矩形宽度(必须) * h 矩形高度(必须) * r 矩形圆角半径(可选，默认为0) * b 矩形边框宽度(可选，默认为1) * c 矩形边框颜色(可选，默认"#FFF") **/ CanvasRenderingContext2D.prototype.roundRect =
Android长方形图片生成正圆形，以及矩形图片生成圆角
weixin_30485379的博客
03-16 174
一般要做正圆形图片，只能是正方形的基础上才能实现，否则就变成椭圆了，下面说说如何使长方形的图片生成正圆形图片 废话不多说，没图没真相，先上图吧： 原图： 变成正圆后： 下面上代码： public static Bitmap makeRoundCorner(Bitmap bitmap) { ...
HTML5 canvas画圆角框
05-27
NULL 博文链接：https://chinaandroid.iteye.com/blog/606033
HTML5 Canvas自定义圆角矩形与虚线示例代码
09-28
HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，通过JavaScript的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能，具体实现如下，感兴趣的朋友可以参考下
QML--Canvas画布实现矩形圆形等圈定
01-10
QML（Qt Meta Language）是Qt框架的一部分，主要用于创建富交互式用户界面，而qt5是Qt框架的第五个主要版本，引入了更多优化和新特性。 Canvas组件的核心是它的`绘画上下文`（Painting Context），这个上下文提供了...
制作正圆角的button1,正圆角矩形的绘画方法
11-03
说明：正圆角矩形的绘画方法 核心技术：Delphi6 Canvas Google搜索：Delphi6 Canvas RoundRect,Round Corner,Canvas.Ellipse(),Canvas.Rectangle(),ROUND()
css3实现圆角矩形
04-11
css3实现圆角矩形 使用border-radius实现圆角，兼容到IE6
python画圆角矩形_Python图像库（PIL）绘图——带渐变的圆角矩形
weixin_34226837的博客
12-29 1438
这是一种非常野蛮的方法，但它能完成任务。生成渐变的代码是从here中借用的。from PIL import Image, ImageDrawdef channel(i, c, size, startFill, stopFill):"""calculate the value of a single color channel for a single pixel"""return startFil...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
weixin_33785971的博客
02-05 1454
详解微信小程序canvas圆角矩形的绘制的方法发布时间：2020-10-04 18:20:31来源：脚本之家阅读：103作者：清夜微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制，但有时候在使用 canvas 绘图的时候，也需要圆角，例如需要将页面上某块区域导出为图片下载到本地的时候，常用的解决方法就是使用 canvas 将这块区域绘制出来，最后导出 canvas ...
用python画圆角矩形_python-3.x
weixin_39553352的博客
12-10 1052
一种解决方案是使用具有自定义样式的ttk框架，该样式使用角落的图像。以下示例改编自我在2007年写回的tcl / tk解决方案。它使用奇怪的颜色作为焦点，并且需要白色背景，但您可以创建自己的图像来替换此解决方案中使用的图像(或编辑本例中的图像1 ) # adapted from http://wiki.tcl.tk/%0920152import tkinter as tkfrom tkinter ...
html+css做圆角表格
hhxxcj的专栏
01-16 1191
方法一html>head> title>css圆角效果title> meta http-equiv="content-type" content="text/html; charset=gb2312"> style type="text/css">div.RoundedCorner{background: #9BD1FA}b.rtop, b.rbo
html5 canvas 绘制圆角矩形
happyrabbit456的专栏
02-15 2478
html5没有圆角矩形的绘制函数，不过可以通过arc和line组合成圆角矩形，或者quadraticCurveTo和lineTo组合成圆角矩形。 下面是示例代码： //------------------------------------- /** * 绘制圆角矩形,用arc和LineTo函数 */ function roundRectanglePath(context,
html设置input圆角矩形_CSS+Jquery实现页面圆角框方法大全
weixin_42107165的博客
01-14 1689
所以我就想用一个既方便调用又方便更新的方法来实现，结果如愿以偿。先将此技术点总结如下：在此之前我也寻找过目前网络上最流行的做法的实现方案，大体共总结出7种方法，但是发现他们的方法多多少少都存在缺陷，后来我自己做出了我自己觉得满意的方法。先看目前网络上最流行的7种做法：１，无图片纯css圆角框收录理由：兼容性强，不用图形图一特点：1.不用任何图形，使用很多个div容器模拟出圆角效果。2.兼容性：通杀...
python画圆角矩形_js绘制圆角矩形
weixin_29461699的博客
02-04 707
绘制出来啦，代码如下矩形.juxing{/* 加上css会很奇怪-。-*//* transition:all 0.1s ease-in; */}点击const len = 50;let array = [];let time = null;function start() {clearInterval(time);time = setInterval(() => {huanwei();}, ...
HTML5 Canvas 2.0作图函数库升级：新增正圆角矩形绘制功能
这个函数用于绘制具有指定圆角半径的正圆角矩形，这对于需要创建美观界面或定制控件时非常实用。其参数包括矩形的左上角坐标P1、右下角坐标P2以及圆角的大小Radius。 为了使用这些函数，开发者需要在HTML文件中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值