<!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. Ubuntu杂记——Ubuntu下Eclipse安装Maven问题

    转:在线安装maven插件问题:Cannot complete the install because one or more required items could not be found. 使 ...

  2. Flume NG Getting Started（Flume NG 新手入门指南）

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  3. js 对Array的补充

    Array.form的用法 1.可以将各种值转为真正的数组,并且还提供map功能.这实际上意味着,只要有一个原始的数据结构,你就可以先对它的值进行处理,然后转成规范的数组结构,进而就可以使用数量众多的 ...

  4. 1Z0-053 争议题目解析685

    1Z0-053 争议题目解析685 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 685.In your test database: -You are using Recover ...

  5. Google数据中心B4网络具体实现

    ① 背景介绍 Google的网络有两种,一种是数据中心内部网络,另外一种是WAN网,其中WAN网又分为两种:一是数据中心之间的互联网络,属于内部网络(G-Scale Network),另外一种是面向I ...

  6. 通过SQL Server自定义数据类型实现导入数据

    写在前面 在看同事写的代码时看到了SQL Server中可以自定义数据类型,而且定义的是DataTable类型的数据类型. 后我想起了以前我们导入数据时要么是循环insert写入,要么是SqlBulk ...

  7. 大小写互换-"数字字符串"转换成数字

    今天穿着hacker浑浊马甲在百度编程课堂实训习题中发现了这个很简单的问题,就做了下. 为了考虑输入的是否是数字,结果写好后竟然超时了. 不过里面用到的将字符串装换成数字的方法,感觉是个收获,因此在此 ...

  8. Java 技能树

  9. 固定在网页顶部跟随滚动条滑动而滑动的DIV层

    在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 体验效果:http://hovertree.com/texiao/jsstudy/1/ 代码如下: <!DOC ...

  10. form表单提交数据

    js代码: // form 跳转 gotourl//跳转的页面 options json格式参数 function FromGoTo(gotourl, options) { var inputhtml ...