<!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. 不行，受不了了，我要记录下这个 bug

    我们在使用 java 中使用线程 Thread 的时候,在 run(){  } 里面的如果要传递参数给函数,一般,编译系统都会提示我们,要将这个参数尽可能地设置为 final,即常量,一旦定义就不能再 ...

  2. python mock基本使用

    什么是mock? mock在翻译过来有模拟的意思.这里要介绍的mock是辅助单元测试的一个模块.它允许您用模拟对象替换您的系统的部分,并对它们已使用的方式进行断言. 在Python2.x 中 mock ...

  3. 【JUC】JUC锁框架综述

    一.前言 在分析完了集合框架后,很有必要接着分析java并发包下面的源码,JUC(java.util.concurrent)源码也是我们学习Java迈进一步的重要过程.我们分为几个模块进行分析,首先是 ...

  4. 【Debug】Web开发中，Tomcat正常启动，访问欢迎页404，怎么办？

    访问页面出现404是一个会经常遇到的问题.每次开发Web项目时总要掉这个坑里几次,而且还不长记性.今天来总结一下,开发时遇到这个问题的解决思路. 1. 查看访问地址是否正确,有无拼写错误. 越是低级的 ...

  5. Centos7下修改mysql5.6编码方式 解决网站中文显示问号

    解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家需要用到的字符,是国际编码. 具体操作: 1.进入MySQL控制台 mysql  -u root -p 输入密码 查看 ...

  6. mybatis入门基础(九)----逆向工程

    一.什么是逆向工程 mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mapper.xml.po. ...

  7. C#获取图片的后缀名

    最近在学习过程中遇到一个问题,就是如何获取图片的格式,对于一张知道全路径的照片,如果其路径包含后缀名的话,要取得后缀名,只需要一行代码即可: var ext = System.IO.Path.GetE ...

  8. Xamarin.Android之封装个简单的网络请求类

    一.前言 回忆到上篇 <Xamarin.Android再体验之简单的登录Demo> 做登录时,用的是GET的请求,还用的是同步, 于是现在将其简单的改写,做了个简单的封装,包含基于Http ...

  9. Visual Studio 2005 搭建Windows CE 6.0环境之准备

    Microsoft Visual Studio 2005 Visual Studio 2005 Professional 官方90天试用版英文版:http://download.microsoft.c ...

  10. javaMail使用163邮箱报535 Error: authentication failed

    javaMail使用网易163邮箱或者是126或者是网易其他邮箱报535 Error: authentication failed javax.mail.AuthenticationFailedExc ...