HTML5 Canvas自定义圆角矩形与虚线示例代码


Posted in HTML / CSS onAugust 02, 2013

HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)

实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线以及控制虚线间隔大小,学会绘制圆角矩形的技巧。

HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能,但是通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能。代码的演示效果如下:
HTML5 Canvas自定义圆角矩形与虚线示例代码 
组件fishcomponent.js的代码如下:

复制代码
代码如下:

CanvasRenderingContext2D.prototype.roundRect =
function(x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y+ height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if (stroke) {
this.stroke();
}
if (fill) {
this.fill();
}
};
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// default interval distance -> 5px
if (typeof pattern === "undefined") {
pattern = 5;
}
// calculate the delta x and delta y
var dx = (toX - fromX);
var dy = (toY - fromY);
var distance = Math.floor(Math.sqrt(dx*dx + dy*dy));
var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// draw dash line
this.beginPath();
for(var dl=0; dl<dashlineInteveral; dl++) {
if(dl%2) {
this.lineTo(fromX + dl*deltax, fromY + dl*deltay);
} else {
this.moveTo(fromX + dl*deltax, fromY + dl*deltay);
}
}
this.stroke();
};

HTML中调用演示:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Rounded Rectangle Demo</title>
<script src="fishcomponent.js"></script>
<link href="default.css" rel="stylesheet" />
<script>
var ctx = null; // global variable 2d context
var imageTexture = null;
window.onload = function() {
var canvas = document.getElementById("text_canvas");
console.log(canvas.parentNode.clientWidth);
canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
var context = canvas.getContext('2d');
context.strokeStyle="red";
context.fillStyle="RGBA(100,255,100, 0.5)";
context.roundRect(50, 50, 150, 150, 5, true);
context.strokeStyle="blue";
for(var i=0; i<10; i++) {
var delta = i*20;
var pattern = i*2+1;
context.dashedLineTo(250, 50+delta, 550, 50+delta, pattern);
}
}
</script>
</head>
<body>
<h1>HTML5 Canvas Dash-line Demo - By Gloomy Fish</h1>
<pre>Dash line and Rounded Rectangle</pre>
<div id="box_plot">
<canvas id="text_canvas"></canvas>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
CSS3美化表单控件全集
Jun 29 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 #HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 #HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 #HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 #HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 #HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 #HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 #HTML / CSS
You might like
解析link_mysql的php版
2013/06/30 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
实现复选框全选/全不选切换
2006/12/23 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python计算auc的方法
2020/09/09 Python
python批量修改交换机密码的示例
2020/09/22 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
高二生物教学反思
2014/01/27 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
股东合作协议书
2014/09/12 职场文书
大学生自我评价范文
2015/03/03 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书