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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 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
五个PHP程序员工具
2008/05/26 PHP
php缓存技术详细总结
2013/08/07 PHP
yii中widget的用法
2014/12/03 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php实现word转html的方法
2016/01/22 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
javascript之bind使用介绍
2011/10/09 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python 多进程和数据传递的理解
2017/10/09 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python多线程同步实例教程
2019/08/11 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
应届生求职信
2014/05/31 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技