2.9.3_arcTo()画圆角矩形
来源:互联网 发布:网络层有哪些协议 编辑:程序博客网 时间:2024/06/06 03:09
2.9.3_arcTo()画圆角矩形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>arcTo()画圆角矩形</title> <style> body{ background: #000; } #canvas{ background: #fff; } </style> </head> <body> <canvas id="canvas" width="1000" height="600"></canvas> </body> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); //初始化 drawGrid('lightgray',10,10); drawRoundedRect('blue','yellow',50,40,100,100,10); //以左上角为起点绘制 drawRoundedRect('purple','green',275,40,-100,100,20);//以右上角为起点绘制 drawRoundedRect('red','white',300,140,100,-100,30);//以左下角为起点绘制 drawRoundedRect('white','blue',525,140,-100,-100,40);//以右下角沩起点绘制 //画圆角矩形 //参数:描边颜色,填充颜色,矩形一角的点(左上角,或者右上角),矩形宽,矩形高,圆弧角度 function drawRoundedRect(strokeStyle,fillStyle,cornerX,cornerY,width,height,cornerRadius){ context.beginPath(); roundedRect(cornerX,cornerY,width,height,cornerRadius); context.strokeStyle = strokeStyle; context.fillStyle = fillStyle; context.lineWidth = 10; context.stroke(); context.fill(); } //圆角矩形 function roundedRect(cornerX,cornerY,width,height,cornerRadius){ if(width>0){ context.moveTo(cornerX+cornerRadius,cornerY); }else{ context.moveTo(cornerX-cornerRadius,cornerY); } context.arcTo(cornerX+width,cornerY,cornerX+width,cornerY+height,cornerRadius); //以width为正来看,为右上角 context.arcTo(cornerX+width,cornerY+height,cornerX,cornerY+height,cornerRadius);//为右下角 context.arcTo(cornerX,cornerY+height,cornerX,cornerY,cornerRadius);//为左下角 if(width>0){ context.arcTo(cornerX,cornerY,cornerX+cornerRadius,cornerY,cornerRadius) //为左上角 }else{ context.arcTo(cornerX,cornerY,cornerX-cornerRadius,cornerY,cornerRadius); } } //画网格线 function drawGrid(color,stepX,stepY){ context.save(); context.strokeStyle = color; context.lineWidth = 0.5; for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){ context.beginPath(); context.moveTo(i,0); context.lineTo(i,context.canvas.height); context.stroke(); } for(var i=stepY+0.5;i<context.canvas.height;i+=stepY){ context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); context.stroke(); } context.restore(); } </script></html>
0 0
- 2.9.3_arcTo()画圆角矩形
- 2.9.3_arcTo()扩展画圆角矩形
- AWT构造矩形,圆角矩形,3D矩形
- C# 画圆角矩形
- [转]C# 画圆角矩形
- div+css 画圆角矩形
- C# 画圆角矩形
- GDI+画圆角矩形
- iPhone 画圆角矩形
- C# 画圆角矩形
- shape画圆角矩形,渐变
- 利用css画圆角矩形
- 矩形模式3
- 矩形
- 矩形
- 矩形
- 矩形
- 矩形
- Caffe代码分析经验
- C++ this指针的用法
- Tomcat的配置设置
- caffe 参数介绍
- 29、B-树的插入、查找、删除
- 2.9.3_arcTo()画圆角矩形
- 调优之IO调度
- bzoj 1045: [HAOI2008] 糖果传递 (数学相关)
- zzuli 1328: 台球碰撞(思维)@
- git使用ssh
- java C读取二进制文件方式
- 剑指offer-面试题52-构建乘积数组
- 对于发生Hash冲突的key,如何找到对应value?
- 单点登录CAS使用记(二):部署CAS服务器以及客户端