下面是个HTML5 Canvas自定义圆角矩形与虚线示例代码教程，撑握了其技术要点，学起来就简单多了。赶紧跟着小编一起来看看吧！
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示，如何绘制虚线以及控制虚线间隔大小，学会绘制圆角矩形的技巧。
HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能，但是通过JavaScript语言的可以实现对对象添加这两个函数功能。代码的演示效果如下：
组件fishcomponent.js的代码如下：
代码如下：
=
function(x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined") {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
();
(x + radius, y);
(x + width - radius, y);
(x + width, y, x + width, y + radius);
(x + width, y + height - radius);
(x + width, y + height, x + width - radius, y+ height);
(x + radius, y + height);
(x, y + height, x, y + height - radius);
(x, y + radius);
(x, y, x + radius, y);
();
if (stroke) {
();
}
if (fill) {
();
}
};
= 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 = ((dx*dx + dy*dy));
var dashlineInteveral = (pattern = 0) ? distance : (distance/pattern);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// draw dash line
();
for(var dl=0; dldashlineInteveral; dl++) {
if(dl%2) {
(fromX + dl*deltax, fromY + dl*deltay);
} else {
(fromX + dl*deltax, fromY + dl*deltay);
}
}
();
};
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"
titleCanvas 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;
= function() {
var 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; i10; i++) {
var delta = i*20;
var pattern = i*2+1;
context.dashedLineTo(250, 50+delta, 550, 50+delta, pattern);
}
}
/script
/head
body
h1HTML5 Canvas Dash-line Demo - By Gloomy Fish/h1
preDash line and Rounded Rectangle/pre
div
canvas/canvas
/div
/body
/html
