<!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. 记录下帮助一位网友解决的关于android子控件的onTouch或onClick和父OnTouch 冲突的问题。

    前三天收到位网友的私信求助,问题大概如标题所示.具体是下面的情况,个人感觉,这个问题挺有趣,也会在实际项目开发中很常见.不想看前奏的请直接跳至解决方法. 问题原型: 父控件是自定义的 LinearLa ...

  2. objective-c 语法快速过（2）

    oc类的声明和定义的常见错误 1.只有类的声明,没有类的实现 2.漏了@end 3.@interface和@implementation嵌套,也就是@interface或者@implementatio ...

  3. ubuntu 配置git公钥

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...

  4. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  5. 实现iOS图片等资源文件的热更新化(三):动态的资源文件夹

    简介 此文,将尝试动态从某个不确定的文件夹中加载资源文件.文章,会继续完善自定义的 imageNamed 函数,并为下一篇文章铺垫. 这么做的意义 正如我们经常所说的那样,大多数情景知道做事的意义往往 ...

  6. 关于jsp的内置对象request和response的重定向和转化（待补充）

    请求重定向 1.客户端行为 2.response.sengRedirect(): 3.本质上讲,相当于请求两次 4.URL地址会改变 请求转发 1.服务器行为 2.response.getReques ...

  7. 7.8 数据注解特性--Column

    Column特性可以用到类的属性中,Code-First默认的约定是使用属性名称作为列名.这个Column特性可以打破这个特性. 看下面的代码: using System; using System. ...

  8. 数据结构(C语言第2版)-----数组，广义表，树，图

    任何一个算法的设计取决于选定的数据结构,而算法的实现依赖于采用的存储结构. 之前线性表的数据元素都是非结构的原子类型,元素的值是不可再分的.下面学习的这两个线性表是很特殊的,其中数据元素本身也可能是一 ...

  9. linux使用心得(持续更新)

    ! 查看发行版本信息 lsb_release -a uname -a   以下方法只适合redhat和centos cat /etc/redhat-release rpm -q redhat-rele ...

  10. C#+arcengine10.0+SP5实现鹰眼（加载的是mdb数据库中的数据）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...