HTML5 Canvas自定義圓角矩形與虛線示例代碼
發(fā)布時(shí)間：2013-08-02 16:44:28 作者：佚名 
我要評(píng)論
我要評(píng)論HTML5 Canvas繪制對(duì)象中提供的原生功能沒(méi)有實(shí)現(xiàn)繪制圓角矩形與虛線的功能，通過(guò)JavaScript的Object.prototype可以實(shí)現(xiàn)對(duì)對(duì)象CanvasRenderingContext2D添加這兩個(gè)函數(shù)功能，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
HTML5 Canvas自定義圓角矩形與虛線(RoundedRectangle and Dash Line)
實(shí)現(xiàn)向HTML Canvas 2d context繪制對(duì)象中添加自定義的函數(shù)功能演示，如何繪制虛線以及控制虛線間隔大小，學(xué)會(huì)繪制圓角矩形的技巧。
HTML5 Canvas繪制對(duì)象中提供的原生功能沒(méi)有實(shí)現(xiàn)繪制圓角矩形與虛線的功能，但是通過(guò)JavaScript語(yǔ)言的Object.prototype可以實(shí)現(xiàn)對(duì)對(duì)象CanvasRenderingContext2D添加這兩個(gè)函數(shù)功能。代碼的演示效果如下：
組件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中調(diào)用演示：
<!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>
實(shí)現(xiàn)向HTML Canvas 2d context繪制對(duì)象中添加自定義的函數(shù)功能演示，如何繪制虛線以及控制虛線間隔大小，學(xué)會(huì)繪制圓角矩形的技巧。
HTML5 Canvas繪制對(duì)象中提供的原生功能沒(méi)有實(shí)現(xiàn)繪制圓角矩形與虛線的功能，但是通過(guò)JavaScript語(yǔ)言的Object.prototype可以實(shí)現(xiàn)對(duì)對(duì)象CanvasRenderingContext2D添加這兩個(gè)函數(shù)功能。代碼的演示效果如下：
組件fishcomponent.js的代碼如下：
復(fù)制代碼
代碼如下: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中調(diào)用演示：
復(fù)制代碼
代碼如下:<!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>
相關(guān)文章
HTML5中通過(guò)li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行
這篇文章主要介紹了HTML5中通過(guò)li-canvas輕松實(shí)現(xiàn)單圖、多圖、圓角圖繪制，單行文字、多行文字等,需要的朋友可以參考下2018-11-30
這篇文章主要介紹了詳解html2canvas截圖不能截取圓角圖片的解決方案的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-30使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例
這篇文章主要介紹了使用HTML5 Canvas繪制圓角矩形及相關(guān)的一些應(yīng)用舉例,作者舉了2048小游戲和微信對(duì)話框兩個(gè)實(shí)用的例子來(lái)作為操作Canvas API的實(shí)用練習(xí)推薦,需要的朋友可以2016-03-22html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形
上一篇文章我講了畫矩形和圓形的方法，他們都有原生的canvas繪圖函數(shù)可完成。而本文講的圓角矩形則只有通過(guò)其他方法模擬出來(lái),我們動(dòng)用把面拆成線條的能力，很容易就能發(fā)現(xiàn)2013-01-09- 這篇文章主要介紹了canvas繪制圓角頭像的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2019-01-17
