这一篇用canvas画个圆角矩形,什么是圆角矩形呢,先上个效果图:
再来个绘制的分析图(注:鼠标所在的位置为(0,0),r为边角圆形的半径,width为整个矩形的宽度,height为高度,以下的各个坐标为圆形的圆心坐标):
实现代码:
window.onload=function(){ var myCanvas = document.getElementById("myCanvas");//获取canvas对象 if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签 //设置canvas的宽度和高度 myCanvas.width=800; myCanvas.height=600; var context = myCanvas.getContext("2d");//获取画布context的上下文环境 //绘制一个圆角矩形 strokeRoundRect(context,150,50,500,500,50); //绘制并填充一个圆角矩形 //fillRoundRect(context,150,50,500,500,50); }else{ alert("您的浏览器不支持canvas,请换个浏览器试试"); } }; /**该方法用来绘制一个有填充色的圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param fillColor:填充颜色 **/ function fillRoundRect(cxt,x,y,width,height,radius,/*optional*/fillColor){ //圆的直径必然要小于矩形的宽高 if(2*radius>width || 2*radius>height){return false;} cxt.save(); cxt.translate(x,y); //绘制圆角矩形的各个边 drawRoundRectPath(cxt,width,height,radius); cxt.fillStyle=fillColor||"#000";//若是给定了值就用给定的值否则给予默认值 cxt.fill(); cxt.restore(); } /**该方法用来绘制圆角矩形 *@param cxt:canvas的上下文环境 *@param x:左上角x轴坐标 *@param y:左上角y轴坐标 *@param width:矩形的宽度 *@param height:矩形的高度 *@param radius:圆的半径 *@param lineWidth:线条粗细 *@param strokeColor:线条颜色 **/ function strokeRoundRect(cxt,x,y,width,height,radius,/*optional*/lineWidth,/*optional*/strokeColor){ //圆的直径必然要小于矩形的宽高 if(2*radius>width || 2*radius>height){return false;} cxt.save(); cxt.translate(x,y); //绘制圆角矩形的各个边 drawRoundRectPath(cxt,width,height,radius); cxt.lineWidth = lineWidth||2;//若是给定了值就用给定的值否则给予默认值2 cxt.strokeStyle=strokeColor||"#000"; cxt.stroke(); cxt.restore(); } function drawRoundRectPath(cxt,width,height,radius){ cxt.beginPath(0); //从右下角顺时针绘制,弧度从0到1/2PI cxt.arc(width-radius,height-radius,radius,0,Math.PI/2); //矩形下边线 cxt.lineTo(radius,height); //左下角圆弧,弧度从1/2PI到PI cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI); //矩形左边线 cxt.lineTo(0,radius); //左上角圆弧,弧度从PI到3/2PI cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2); //上边线 cxt.lineTo(width-radius,0); //右上角圆弧 cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2); //右边线 cxt.lineTo(width,height-radius); cxt.closePath(); }
根据这个圆角矩形再来绘制一个2048小游戏的棋盘,效果图如下:
在window.onload方法中添加如下代码:
//绘制一个2048的棋盘格 fillRoundRect(context,150,50,500,500,10,"#bbaba0"); //绘制16个小的棋盘 for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ //170=150+20:150是棋盘左上角的x坐标,20为棋盘边线到四周各个色块的间距,也是棋盘中16个色块之间的间距 //120=100+20:100是小色块的宽度,20为间距 fillRoundRect(context,170+i*120,70+j*120,100,100,6,"#ccc0b3"); } }
最后,感谢老师的分享!
相关推荐
android 使用canvas把矩形图片变成圆角矩形显示 参考网址:http://blog.csdn.net/rhljiayou/article/details/7212620
说明:正圆角矩形的绘画方法 核心技术:Delphi6 Canvas Google搜索:Delphi6 Canvas RoundRect,Round Corner,Canvas.Ellipse(),Canvas.Rectangle(),ROUND()
Canvas 中文名称叫“画布”,它是游戏中所有UI组件的“容器”。一个场景中,可以允许多个Canvas对象的存在,还允许Canvas之间可以进行“嵌套”使用。需要注意的是,场景中的任何一个UI对象,都肯定是某个Canvas对象...
圆角矩形与一般矩形的区别在于,前者的四个角都是圆弧,所以只需要将一般矩形的四个角切掉,换成圆弧即可,如下图就是一个一般矩形被切掉了四个角的样子: 很明显,切掉了四个角的矩形,剩下其实就是四条 line ,...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
2.20_arc,圆弧和圆角矩形|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全系列
主要介绍了使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例,作者举了2048小游戏和微信对话框两个实用的例子来作为操作Canvas API的实用练习推荐,需要的朋友可以参考下
QML--Canvas画布实现矩形圆形等圈定
主要介绍了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法,结合实例形式分析了Android自定义view绘制圆角矩形的相关方法与使用技巧,需要的朋友可以参考下
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线以及控制虚线间隔大小,学会绘制圆角矩形的技巧。 ...
上一篇文章我讲了画矩形和圆形的方法,他们都有原生的...而本文讲的圆角矩形则只有通过其他方法模拟出来,我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成,感兴趣的朋友可以了解下
学习学习学习 1:初学canvas getContext():上下文环境 2:画矩形 fillRect(x,y,width,height) 不加单位 填充矩形 strokeRect(x,y,wdith,height) 不加单位 带边框的矩形 相当于在中间画 100 :99.5-100.5 (99-101) ...
本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形。当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟,感兴趣的朋友可以了解下
自定义控件 426 10.1 圆角矩形控件 427 10.2 进度条控件 433 10.3 滑动条控件 437 10.4 图像查看器控件 446 10.5 总结 454 第11章 移动平台开发 455 11.1 移动设备的视窗 456 11.2 媒体特征查询技术 461 ...
canvas绘制基础图形(canvas 网格线 三角形 圆角矩形 箭头)的插件,包含初始化画布、绘制网格线 、绘制圆点、绘制圆环 、绘制图片等
canvas绘制基础图形(canvas 网格线 三角形 圆角矩形 箭头)的插件,包含初始化画布、绘制网格线 、绘制圆点、绘制圆环 、绘制图片等
(A lightweight vue components use canvas draw image by css properties.)主要特性:绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进)绘制图片(圆角、旋转、边框、模式:类似小程序 image mode...