javascript 怎么把多幅圖片畫進(jìn)canvas中，并且能拖動他們，給他們連線

canvas不可以拖動。你也不可以直接拖動canvas里面的任何元素，包括已經(jīng)載入的圖片（實際上圖片已經(jīng)成為canvas的一部分）。先不說連線，因為我不清楚你要怎樣連線。先拿一張圖片來說。

成都創(chuàng)新互聯(lián)專注于貢井企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,電子商務(wù)商城網(wǎng)站建設(shè)。貢井網(wǎng)站建設(shè)公司,為貢井等地區(qū)提供建站服務(wù)。全流程按需求定制開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

思路：canvas不可以拖動，但div可以啊。考慮div和canvas。位置屬性設(shè)置為absolute，否則容易出錯。

注意：將div的z-index值設(shè)置大點，保證其在Canvas畫面之上。

將div的大小設(shè)置成圖片的大小。

圖片不是在div里面，也沒必要。

拖動div，拖動到新位置X1,Y1時，清除canvas的圖片：ctx.clearRect(X,Y,W,H);X是上一個位置圖片在canvas中的橫坐標(biāo)，Y是上一個位置的縱坐標(biāo)，W是圖片寬度，H是圖片高度。

繪制新位置下的圖片：ctx.drawImage(img,X,Y);img是一個圖片節(jié)點。不會用drawImage請百度哈。

【【【具體代碼：】】】

div拖動：

var?divObj=document.getElementById("cover");

var?moveFlag=false;

divObj.onmousedown=function(e){

moveFlag=true;

var?clickEvent=window.event||e;

var?mwidth=clickEvent.clientX-divObj.offsetLeft;

var?mheight=clickEvent.clientY-divObj.offsetTop;

document.onmousemove=function(e){

var?moveEvent=window.event||e;

if(moveFlag){

divObj.style.left=moveEvent.clientX-mwidth+"px";

divObj.style.top=moveEvent.clientY-mheight+"px";

divObj.onmouseup=function(){

moveFlag=false;

}

}

}

};

來解讀下這段代碼：首先獲取div對象，設(shè)置拖拽標(biāo)志moveFlage,當(dāng)onmousedown時為true表示可以拖動，當(dāng)onmouseup時為false表示不能拖動了。

var?clickEvent=window.event||e;

var?mwidth=clickEvent.clientX-divObj.offsetLeft;

var?mheight=clickEvent.clientY-divObj.offsetTop;

這三行代碼是為了修正光標(biāo)位置。當(dāng)點擊時，記錄下光標(biāo)在div上的位置。mwidth和mheight表示光標(biāo)落點相對于div左邊和上邊的距離。

接下來繪制圖片：

首先定義全局變量X和Y，它們是為了實時更新圖像的繪制坐標(biāo)。

var?ctx=document.getElementById("myCanvas").getContext("2d");

var?img=document.getElementById("myImg");

function?drawImg(){

ctx.clearRect(0,0,1000,500);

ctx.beginPath();

ctx.drawImage(img,X,Y);

ctx.closePath();

ctx.stroke();

}

window.onload=function(){

setInterval(drawImg,1);

}

獲取“畫筆”，獲取圖片對象。這里setInterval循環(huán)執(zhí)行繪制圖片的函數(shù)，以刷新圖片的位置，setInterval的間隔值越小，拖拽起來越“流暢”。

同時別忘了clearRect，當(dāng)圖片移動到下一個位置時，清除上一個位置的圖片，參數(shù)為Canvas畫布的坐標(biāo)和尺寸。

在拖拽時將修正后的光標(biāo)坐標(biāo)傳給X、Y：

X=moveEvent.clientX-mwidth;

Y=moveEvent.clientY-mheight;

最后加上div和圖像的活動范圍：

if(moveEvent.clientX=mwidth){

divObj.style.left=0+"px";

X=0;

}

if(parseInt(divObj.style.left)+divObj.offsetWidth?=1000){

divObj.style.left=1000?-?divObj.offsetWidth+"px";

X=1000?-?divObj.offsetWidth;

}

if(moveEvent.clientY=mheight){

divObj.style.top=0+"px";

Y=0;

}

if(parseInt(divObj.style.top)+divObj.offsetHeight=500){

divObj.style.top=500-divObj.offsetHeight+"px";

Y=500-divObj.offsetHeight;

}

這個就看個人的要求了，注意是要同時限定div和圖片的活動范圍。1000與500為本例的畫布大小，如果是在整個頁面里活動就換成innerWidth或innerHeight。

徹底隱藏div看看效果：

最后說下點擊事件，這里要注意的是在拖拽的過程中onmousedown與onmouseup二者就構(gòu)成了一個click過程，但我們不希望在拖拽結(jié)束后觸發(fā)點擊事件。

這里有個比較簡單的辦法，定義一個clickFlag默認(rèn)為false,當(dāng)onmousedown時設(shè)為true，若進(jìn)行了onmousemove事件時設(shè)為false。

在最后onmouseup時判斷clickFlag的值，為true時才觸發(fā)點擊事件。也就是說當(dāng)你按下鼠標(biāo)時，只有不發(fā)現(xiàn)移動，松開鼠標(biāo)時才會觸發(fā)點擊事件。

HTML5 Canvas基本繪制線條教程

HTML5 Canvas基本繪制線條教程

怎么畫線條？和現(xiàn)實中畫畫差不多：

1.移動畫筆，使畫筆移動至繪畫的開始處

2.確定第一筆的停止點

3.規(guī)劃好之后，選擇畫筆（包括畫筆的粗細(xì)和顏色等）

4.確定繪制

因為Canvas是基于狀態(tài)的繪制（很重要，后面會解釋），所以前面幾步都是在確定狀態(tài)，最后一步才會具體繪制。

1.移動畫筆(moveTo())

之前我們獲得了畫筆context，所以以此為例，給出改方法的使用實例——context.moveTo(100,100)。這句代碼的意思是移動畫筆至(100,100)這個點（單位是px）。記住，這里是以canvas畫布的左上角為笛卡爾坐標(biāo)系的原點，且y軸的正方向向下，x軸的正方向向右。

2.筆畫停點(lineTo())

同理，context.lineTo(600,600)。這句的意思是從上一筆的停止點繪制到(600,600)這里。不過要清楚，這里的moveTo()``lineTo()都只是狀態(tài)而已，是規(guī)劃，是我準(zhǔn)備要畫，還沒有開始畫，只是一個計劃而已！

3.選擇畫筆

這里我們暫且只設(shè)置一下畫筆的顏色和粗細(xì)。

context.lineWidth = 5，這句話的意思是設(shè)置畫筆(線條)的粗細(xì)為10px。

context.strokeStyle = "#AA394C"，這句話的意思是設(shè)置畫筆(線條)的顏色為玫紅色。

因為Canvas是基于狀態(tài)的繪制，所以我們在選擇畫筆粗細(xì)和顏色的同時，其實也是選擇了線條的粗細(xì)和顏色。

4.確定繪制

確定繪制只有兩種方法，fill()和stroke()，有點繪畫基礎(chǔ)的應(yīng)該知道，前者是指填充，后者是指描邊。因為我們只是繪制線條，所以只要描邊就可以了。調(diào)用代碼context.stroke()即可。

畫一個線條

不就一條線段嗎！廢話了這么多！那我們就開始畫吧。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

我還標(biāo)注了一個頁面解析圖，供大家參考。

這里我將原本

標(biāo)簽中的width和height去掉了，但在JavaScript代碼中設(shè)置了canvas對象的width和height的屬性。

小結(jié)：要設(shè)置畫布的大小，只有這兩種方法

1.在標(biāo)簽中設(shè)置；

2.在JS代碼中設(shè)置canvas的'屬性.

怎么樣，是不是非常的酷。接下來我們要加快腳步了，繪制一個多線條組成的圖形。是不是感覺自己離藝術(shù)家又進(jìn)了一步呢？別看這只是簡簡單單的一條線段，這一畫只是我們的一小步，但卻是人類的一大步！

繪制折線

上面我們已經(jīng)成功繪制了一條線段。那么，如果我要繪制有兩個筆畫甚至是很多筆畫的折線怎么辦呢？

聰明的小伙伴肯定已經(jīng)想到了，這還不簡單，復(fù)用lineTo()就可以了。下面我就獻(xiàn)丑隨便畫了一條優(yōu)美的折線~

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

繪制多條折線

那同理，我們要繪制多條樣式各不相同的折線怎么辦呢？比如我們在這里畫三條折線，分別是紅色、藍(lán)色、黑色。聰明的小伙伴肯定想到了，這還不簡單，只需要平移一下再改下畫筆顏色就行了。代碼格式都一樣的，復(fù)制就可以了。代碼如下。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

運行結(jié)果：

咦？是不是很奇怪？說好的先紅色，再藍(lán)色，再黑色呢？怎么全是黑色了？其實，這里的原因是我之前一直強調(diào)的一點——Canvas是基于狀態(tài)的繪制。

什么意思呢？其實這段代碼每次使用stroke()時，它都會把之前設(shè)置的狀態(tài)再繪制一遍。第一次stroke()時，繪制一條紅色的折線；第二次stroke()時，會再重新繪制之前的那條紅色的折線，但是這個時候的畫筆已經(jīng)被更換成藍(lán)色的了，所以畫出的折線全是藍(lán)色的。換言之，strokeStyle屬性被覆蓋了。同理，第三次繪制的時候，畫筆顏色是最后的黑色，所以會重新繪制三條黑色的折線。所以，這里看到的三條折線，其實繪制了3次，一共繪制了6條折線。

那么，我想繪制三條折線，難道就沒有辦法了嗎？藝術(shù)家之魂到此為止了么？沒救了么？不，還有辦法。

使用beginPath()開始繪制

為了讓繪制方法不重復(fù)繪制，我們可以在每次繪制之前加上beginPath()，代表下次繪制的起始之處為beginPath()之后的代碼。我們在三次繪制之前分別加上context.beginPath()。

JavaScript Code復(fù)制內(nèi)容到剪貼板你的瀏覽器居然不支持Canvas？！趕快換一個吧！！

可以看到，這里得到了我們預(yù)想的結(jié)果。因為使用了beginPath()，所以這里的繪制過程如我們所想的那樣，只繪制了三次，而且每次只繪制一條折線。beginPath()是繪制設(shè)置狀態(tài)的起始點，它之后代碼設(shè)置的繪制狀態(tài)的作用域結(jié)束于繪制方法stroke()、fill()或者closePath()，至于closePath()之后會講到。

所以我們每次開始繪制前都務(wù)必要使用beginPath()，為了代碼的完整性，建議大家在每次繪制結(jié)束后使用closePath()。 ;

跪求，html,css,js前端怎么實現(xiàn)某個點按照軌跡來畫圖案。

這是以前寫的涂鴉板一樣的東西,按住鼠標(biāo)左鍵拖拽就可以繪制指針的運動軌跡

body

center

canvas?id="cavsElem"?width="800"?height="560"?style="border:?1px?solid?black;?"你的瀏覽器不支持此涂鴉板/canvas

畫筆顏色：input?type="color"?id="context.color"?/

畫筆大小:input?type="number"id="context.size"?max="10"?value="1"?/

/center

script

(function(){

var?canvas=document.getElementById('cavsElem');//獲得畫布

var?context=canvas.getContext('2d');//準(zhǔn)備畫筆

var?a=document.getElementById('context.color');

var?b=document.getElementById('context.size');

canvas.onmousedown=function(e){?????//鼠標(biāo)觸發(fā)onmousedown事件時,獲取起始坐標(biāo)

var?x=e.clientX-canvas.getBoundingClientRect().left;

var?y=e.clientY-canvas.getBoundingClientRect().top;

context.beginPath();

context.moveTo(x,y); ???

canvas.onmousemove=function(event){???//觸發(fā)鼠標(biāo)移動事件時，獲取繪制線條的坐標(biāo)

var?x=event.clientX-canvas.getBoundingClientRect().left;

var?y=event.clientY-canvas.getBoundingClientRect().top;

context.lineTo(x,y);//繪制線條

context.strokeStyle=a.value;

context.lineWidth=b.value;

context.stroke();

};

canvas.onmouseup=function(event){????//鼠標(biāo)被松開時，返回null

canvas.onmousemove=null;

};

??};

?}());

/script

/body

javascript如何畫圖形？

這個問題你用baidu搜索一下，有很多的教程。。

;cl=3

1.

JAVASCRIPT經(jīng)常通過用戶提供的數(shù)據(jù)動態(tài)地生成條形圖。總的來說這是由于條形圖的簡潔，它只是簡單地由不確定長度的圖形組成。我們使用JAVASCRIPT動態(tài)地畫出每個圖形，每個圖形的長度和用戶輸入的數(shù)據(jù)有關(guān)。

我們需要的是以一個1x15的圖形作為開始：

如果我想要拉長這幅圖象到 50x15 ，我使用 JavaScript 這樣做：

script

document.write(img src="poll.gif" width="50" height="15"')

/script

這就形成了動態(tài)圖形的基礎(chǔ)。這是一個我用JAVASCRIPT寫的一個簡單的腳本，它用來說明了圖形創(chuàng)建的例子。

script

var graphtext=new Array("Jill", "Bob", "Tony") //圖形項目

var graphvalue=new Array("60", "45", "95") //圖形值 (使用的是百分比，例如70=70%)

var barlength=200

for (i=0;igraphtext.length;i++)

document.write (graphtext[i]+': img src="poll.gif" width="'+graphvalue[i]/100*barlength+'" height="15"br')

/script

Jill:

Bob:

Tony

代碼的關(guān)鍵之處在于：width="'+graphvalue[i]/100*barlength+'"

這句話產(chǎn)生圖形的寬度，這基于用戶提供的數(shù)據(jù)。每個長度是輸入值的百分比，然后乘以條形長度的基本長度。

2.

使用圖形信息建立原始數(shù)據(jù)的圖形。只給復(fù)雜圖形的名稱賦予一定的值（值可以是絕對值或百分比），剩下的留給腳本就行了。

圖形信息允許你在同一個網(wǎng)頁上生成不止一個圖形文件，而這只需要多次的調(diào)用關(guān)鍵的函數(shù)。

Example:

Example 1 (using absolute values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

Total participants: 211

Example 2 (using percentage values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

因為EXAMPLE 1是用絕對值來創(chuàng)建的，腳本也在最后顯示了總值。

指導(dǎo)

步驟一：下面是圖形信息的兩個版本。第一個要求圖形值是絕對值，而第二個是相對值。

絕對方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Absolute)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimage="poll.gif"

//DEFINE GRAPH VALUES [Item name, absolute value]

var graphx=new Array()

graphx[0]=["CNN",60]

graphx[1]=["MSNBC",75]

graphx[2]=["ABC News",24]

graphx[3]=["BBC News",52]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphy=new Array()

function graphit(g,gwidth){

total=0

for (i=0;ig.length;i++)

total+=parseInt(g[i][1])

output='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calpercentage=Math.round(g[i][1]*100/total)

calwidth=Math.round(gwidth*(calpercentage/100))

output+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimage+'" width="'+calwidth+'" height="10" '+calpercentage+'%/td/tr'

}

output+='/table'

document.write(output+'brTotal participants: b'+total+'/b')

}

//CALL GRAPHIT FUNCTION

//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphit(graphx,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

相對方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Percentage)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]

var graphv=new Array()

graphv[0]=["CNN","28%"]

graphv[1]=["MSNBC","36%"]

graphv[2]=["ABC News","11%"]

graphv[3]=["BBC News","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphz=new Array()

function graphitP(g,gwidth){

outputP='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calwidthP=gwidth*(parseInt(g[i][1])/100)

outputP+='trtd'+g[i][0]+'?/tdtdimg src="'+graphimageP+'" width="'+calwidthP+'" height="10" '+g[i][1]+'/td/tr'

}

outputP+='/table'

document.write(outputP)

}

//CALL GRAPHIT FUNCTION

//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphitP(graphv,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

以上回答你滿意么？

網(wǎng)站標(biāo)題：javascript畫筆,Java畫筆
URL標(biāo)題：http://chinadenli.net/article26/dsijhjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、電子商務(wù)、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)