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属性选择符介绍
Oct 17 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php printf输出格式使用说明
2010/12/05 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
Node.js的特点详解
2017/02/03 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
使用Python生成url短链接的方法
2015/05/04 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
高中班长自我鉴定
2013/12/20 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
优秀经理获奖感言
2014/03/04 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
学校计划生育责任书
2015/05/09 职场文书
入党培养人考察意见
2015/06/08 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书