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气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
HTML基础详解(下)
Oct 16 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python中的字典使用分享
2016/07/31 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python并行分布式框架Celery详解
2018/10/15 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python如何实现动态数组
2019/11/02 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python 如何测试文件是否存在
2020/07/31 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
圣诞节开幕词
2015/01/29 职场文书
教师节祝酒词
2015/08/11 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS