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制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
使用CSS实现六边形的图片效果
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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
35个Python编程小技巧
2014/04/01 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
白色公司:The White Company
2017/10/11 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
专家推荐信模板
2014/05/09 职场文书
工商管理自荐书
2014/07/06 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年教学工作总结
2014/11/13 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书