HTML5 Canvas自定义圆角矩形与虚线示例代码
程序员文章站
2023-11-21 12:41:22
HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，通过JavaScript的Object.prototype可以实现对对象CanvasRenderingContext2D添加这两个函数功能，具体实现如... 13-08-02...
html5 canvas自定义圆角矩形与虚线(roundedrectangle and dash line)
实现向html canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。
html5 canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过javascript语言的object.prototype可以实现对对象canvasrenderingcontext2d添加这两个函数功能。代码的演示效果如下：
组件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 canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。
html5 canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过javascript语言的object.prototype可以实现对对象canvasrenderingcontext2d添加这两个函数功能。代码的演示效果如下：
组件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>