<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')

fillRoundRect(context,150,150,500,500,10,'#bbaba0');

for(i=0;i<4;i++)
for(j=0;j<4;j++)
fillRoundRect(context,170+i*120,170+j*120,100,100,6,'#ccc0b3');

function fillRoundRect(context,x,y,width,height,radius,fillColor){
if (2*radius>width || 2*radius>height )
return;
context.save();
//设置开始绘制图形的开始坐标也就是左上角的坐标
context.translate(x,y);
pathRoundRect(context,width,height,radius);
context.fillStyle= fillColor || 'black';
context.fill();
context.restore();
}
function strokeRoundRect(context,x,y,width,height,radius,lineWith,color){
context.save();
//设置开始绘制图形的开始坐标也就是左上角的坐标
context.translate(x,y);
pathRoundRect(context,width,height,radius);
context.lineWith = lineWith || 1;
context.strokeStyle = color || 'black';
context.stroke();
context.restore();
}
function pathRoundRect(context,width,height,radius){
context.beginPath();
context.arc(width-radius,height-radius,radius,0,Math.PI/2);
context.lineTo(radius,height);
context.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
context.lineTo(0,radius);
context.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
context.lineTo(width-radius,0);
context.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
context.closePath();
}
}
</script> </body> </html>

canvas 绘制圆角矩形的更多相关文章

  1. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  2. canva绘制圆角矩形

    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...

  3. 使用canvas绘制渐变色矩形和使用按键控制人物移动

    使用canvas绘制渐变色矩形和使用按键控制人物移动 1.使用canvas绘制渐变色矩形 效果演示 相关代码: <!DOCTYPE html> <html lang="en ...

  4. 在Microsoft Expression Blend 2 中绘制圆角矩形按钮

    原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.c ...

  5. Android中绘制圆角矩形图片及任意形状图片

    圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...

  6. canvas绘制圆角头像

    如果你想绘制的网页包含一个圆弧形的头像的canvas图片,但是头像本身是正方形的,需要的方法如下:首先, 拿到头像在画布上的坐标和宽高:(具体怎么获取不在此做具体介绍) 使用canvas绘制圆弧动画 ...

  7. Delphi中绘制圆角矩形的窗体

    制作圆角矩形的窗体: 01.procedure TPortForm.FormCreate(Sender: Tobject); 02.var hr :thandle; 03.begin 04.hr:=c ...

  8. HTML5 在canvas绘制一个矩形

    笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...

  9. WPF使用Canvas绘制可变矩形

    1.问题以及解决办法 最近因为项目需要,需要实现一个位置校对的功能,大致的需求如下:有一个图片,有一些位置信息,但是位置信息可能和实际有些偏差,需要做简单调整,后面会对这张图片进行切割等,做些处理.( ...

随机推荐

  1. DDD 领域驱动设计－Value Object（值对象）如何使用 EF 进行正确映射

    写在前面 首先,这篇博文是用博客园新发布的 MarkDown编辑器 编写的,这也是我第一次使用,语法也不是很熟悉,但我觉得应该会很爽,博文后面再记录下用过的感受,这边就不多说. 阅读目录: 上一篇回顾 ...

  2. jar包依赖性查询

    项目中碰到jar包冲突,需要排除一些jar包时先要了解jar的依赖关系,maven提供了命令行来查询: mvn dependency:tree 返回依赖的属性结构

  3. 将Excel文件转换为Html

    将Excel文件转换为HTML 背景 我的工作有时会涉及到财务数据的处理.我们大家都知道,Excel文件在处理数据中很流行并且被广泛使用.Excel让我们可以将存储在里面的数据进行数学计算.我在工作中 ...

  4. C/C++ char a[ ] 和 char *a 的差别，改变 char *a爆内存错误的原因

    对于一些需要传入参数为 char * temp 指针类的函数: 我们定义一个 char a[10] 或char *a 传进去都是可以的. 但是, 如果该函数是会改变你所传入的参数的值时, 传入 cha ...

  5. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

  6. Linux入门

    参考资料:http://www.92csz.com/study/linux/ [Linux系统目录结构] 登录系统后,在当前命令窗口下输入 ls / 你会看到 以下是对这些目录的解释: /bin bi ...

  7. PHP之时间处理

    面试的时候有一道题是这样的:封装一个函数实现,给你一个时间,输出这个时间的对应的这一天是星期几,其实无非就是一些时间格式的处理: date_default_timezone_set('PRC'); / ...

  8. hexo在git上搭建个人博客

    公司实习第一天接到的任务是:搭建一个基于Nodejs的开源项目的开发环境,接到任务时以为不是很困难,后来才知道该项目已于去年被废弃,搭配环境的时候遇到了不少问题,折腾了两天还是没有最终完成... 不过 ...

  9. OpenCV2简单的特征匹配

    特征的匹配大致可以分为3个步骤: 特征的提取 计算特征向量 特征匹配 对于3个步骤,在OpenCV2中都进行了封装.所有的特征提取方法都实现FeatureDetector接口,DescriptorEx ...

  10. Rafy 领域实体框架 - 树型实体功能（自关联表）

      在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解. 场景 在开发数据库应用程序时,往往会遇到自关联表的场景.例如,分类信息.组织架构中的部门.文件夹信息等,都 ...