| 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因為文本中包含了所謂“超級鏈接”點。 今天給大家講解的是在HTML5 canvas畫帶箭頭的虛線。關(guān)于Canvas 對象表示一個 HTML 畫布元素 -<canvas>。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。 本案例注意事項： 1、當(dāng)你拖動箭頭時 canvas里面線條繪制自動重新計算點。 2、canvas沒有畫虛線的api，因為對api不是很熟悉，所以就不獻丑了，在網(wǎng)上找的。 3、箭頭出來后 點擊畫布里面的任意點 箭頭將延伸到該處，至于具體的應(yīng)用 修改canvas的lineTo屬性就能實現(xiàn)了。 4、具體的代碼解釋我寫的比較清楚，修改箭頭樣式只需寫過lineTo即可，非常簡單。 效果如下： 
請點擊：canvas畫帶箭頭的虛線 下載本實例相關(guān)素材及源碼
代碼如下： <!--程序說明：
作者：xue51
描述：該程序主要是通過exchange的支持在IE下面實現(xiàn)canvas畫帶箭頭的虛線功能，常用于圖形化工作流的設(shè)計當(dāng)中。
雖然在IE下面可以用vml實現(xiàn)，但是這個就是用來取代vml的�。。。�！HTML5都來了趕緊消滅老IE
注意事項: 1, 該程序是在老外的canvas畫虛線的基礎(chǔ)上做了改進；
2, exchange需要2個額外的JS文件指出。
3，使用的時候在畫布上隨意點點就就能改變箭頭的方向，至于更使用的功能需要您來親自寫寫。
-->
<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Canvas Dotted Lines</title>
<style type="text/css" media="screen">
body { background:#ddd; text-align:center; }
canvas { margin:2em auto; display:block; border:1px solid #666; }
label { padding-right:2em }
</style>
<script type="text/javascript" src="excanvas.js" ></script>
<script type="text/javascript" src="jCanvaScript.1.5.15.min.js" ></script>
</head>
<body>
<!--這個地方需要注意，在IE下面經(jīng)過轉(zhuǎn)換如果不在這里設(shè)置canvas的高和寬就會造成畫布很小-->
<canvas width="800" height="600"></canvas>
<p>
<label>Line Width: <input id="width" value="2" size="1"></label>
<label>Dashes/Gaps: <input id="dashes" value="10 20" size="15"></label>
<label>Line Cap: <select id="linecap"><option>butt</option><option selected>round</option><option>square</option></select></label>
</p>
<!--這個是老外寫的用canvas畫虛線的方法，直接使用-->
<script type="text/javascript" charset="utf-8">
if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo){
CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
if (!dashArray) dashArray=[10,5];
var dashCount = dashArray.length;
this.moveTo(x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dy/dx;
var distRemaining = Math.sqrt( dx*dx + dy*dy );
var dashIndex=0, draw=true;
while (distRemaining>=0.1 && dashIndex<10000){
var dashLength = dashArray[dashIndex++%dashCount];
if (dashLength==0) dashLength = 0.001; // Hack for Safari
if (dashLength > distRemaining) dashLength = distRemaining;
var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
x += xStep
y += slope*xStep;
this[draw ? 'lineTo' : 'moveTo'](x,y);
distRemaining -= dashLength;
draw = !draw;
}
// Ensure that the last segment is closed for proper stroking
//this.moveTo(0,0);
}
}
</script>
<script type="text/javascript" charset="utf-8">
var c = document.getElementsByTagName('canvas')[0];
c.width = 800; c.height = 600;
var defaultX = 350, defaultY = 350;
function drawArr(x, y){
//值初始化，default用于頁面沒有點擊的時候初始化。
var x, y, arr;
if(0 == arguments.length) {
x = 667;
y= 470;
}
else {
x = x;
y= y;
}
var ctx = c.getContext('2d');
ctx.strokeStyle = 'black';
//這3個是用來獲取頁面的自動設(shè)置配置。
var width = document.getElementById('width');
var linecap = document.getElementById('linecap');
var dashes = document.getElementById('dashes');
//這個是核心用來畫每個線段。
var drawDashes = function(){
ctx.clearRect( 0, 0, c.width, c.height );
var dashGapArray = dashes.value.replace(/^\s+|\s+$/g,'').split(/\s+/);
if (!dashGapArray[0] || (dashGapArray.length==1 && dashGapArray[0]==0)) return;
ctx.lineWidth = width.value;
ctx.lineCap = linecap.value;
ctx.beginPath();
ctx.fillStyle = "#8BC54B";
ctx.strokeStyle = 'rgb(0, 0, 100)'
//開始畫虛線。
//當(dāng) x > 起始點的x坐標(biāo)（即點擊點 在起始點的右邊）的時候 不需要 改變這4個坐標(biāo)，但是當(dāng)x < 起始點的X坐標(biāo)（點擊點在起始點左邊的時候）需要改變這4個坐標(biāo)的位置
if(x > defaultX) {
ctx.dashedLine(defaultX, defaultY, x, y, dashGapArray );
}
else {
ctx.dashedLine(x, y, defaultX, defaultY, dashGapArray );
}
//虛線畫完了開始畫箭頭的4個線段
//計算4個點的坐標(biāo)
arr = jisuan(x, y);
//設(shè)定開始點。
ctx.moveTo(arr[0],arr[1]);
ctx.lineTo(x,y)
ctx.lineTo(arr[2],arr[3]);
//下面這個計算是用來在箭頭與虛線的交叉點。直角三角形計算原理。。
ctx.lineTo(x-parseInt(25*Math.cos(arr[4]*Math.PI/180)), y-parseInt(25*Math.sin(arr[4]*Math.PI/180)));
ctx.lineTo(arr[0],arr[1]);
ctx.closePath();
ctx.stroke();
};
drawDashes();
width.onkeyup = drawDashes;
linecap.onchange = drawDashes;
dashes.onkeyup = drawDashes;
}
//該函數(shù)用來根據(jù)鼠標(biāo)點擊點 計算箭頭4個點的坐標(biāo)，在JS中cos和SIN都是計算的弧度，所以需要轉(zhuǎn)換。至于計算方法屬于屬性范疇這里不累述。
//對于該函數(shù)，如果需要修改箭頭的大小 只需修改 45: 箭頭兩邊的長度； 35:箭頭與中間虛線的角度即可。
function jisuan(x, y) {
var angle = parseInt(Math.atan2(y-defaultX,x-defaultY)/Math.PI*180);
var arr = [];
arr[0] = x - parseInt(45 * Math.cos(Math.PI/180*(angle - 35)));
arr[1] = y - parseInt(45 * Math.sin(Math.PI/180*(angle - 35)));
arr[2] = x - parseInt(45 * Math.cos(Math.PI/180*(angle + 35)));
arr[3] = y - parseInt(45 * Math.sin(Math.PI/180*(angle + 35)));
arr[4] = angle
return arr;
}
drawArr();
document.body.onmousedown = function(event) {
var event = event || window.event;
var mousePos = getMousePos(event);
drawArr(mousePos.x, mousePos.y);
}
getMousePos = function(event) {
if (event.pageX || event.pageY) {
mousePos = {
x: event.pageX,
y: event.pageY
};
}
/*ie 與 ff的邊界 處理不同*/
if (!+"\v1") {
mousePos = {
x: event.clientX,
y: event.clientY
}
}
else {
mousePos = {
x:event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
y:event.clientY+document.body.scrollTop+document.documentElement.scrollTop
}
}
//return mousePos
//程序到這里就是一個標(biāo)準(zhǔn)獲取頁面上鼠標(biāo)的坐標(biāo)函數(shù)，下面的代碼是因為 畫布的點不是以瀏覽器的左上角為起始點所以需要減去多余的距離方法如下：
var pos = c.getBoundingClientRect();
mousePos.x = mousePos.x - pos.left;
mousePos.y = mousePos.y - pos.top;
return mousePos;
}
</script>
</body>
</html>
以上就是通過HTML5 canvas畫帶箭頭的虛線的全部內(nèi)容，請繼續(xù)關(guān)注本站教程網(wǎng)。
網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。
|
