javascript如何實(shí)現(xiàn)把界面上的點(diǎn)，動(dòng)態(tài)的依次連接成一個(gè)封閉的圖形？

!DOCTYPE?html

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),井岡山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:井岡山等地區(qū)。井岡山做網(wǎng)站價(jià)格咨詢:028-86922220

html

head

meta?name="viewport"?content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width"?/

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/

title/title

meta?charset="utf-8"?/

/head

body

svg?width="200"?height="200"?viewBox="0?0?200?200"

path?d="M20?20,?L40?0,?60?20,?80?0,?60?40?Z"?stroke="#0ff"?stroke-width="1px"?fill="#f0f"/path

/svg

/body

/html

這個(gè)是SVG實(shí)現(xiàn)，支持所有移動(dòng)端，PC端除IE9以下不支持其他大部分也支持。

svg在html中就是用來(lái)繪制矢量圖的，理論上任何圖形都可以用svg畫出來(lái)，同時(shí)他也和普通html對(duì)象一樣，有自己的各種事件以及樣式。

代碼解析：svg標(biāo)簽，插入一個(gè)矢量圖，寬度200px，高度200px?？梢晠^(qū)域是從坐標(biāo)0 0開始的200 * 200的正方形（說(shuō)的很拗口。。）

path標(biāo)簽，定義一個(gè)路徑，d屬性定義了路徑是啥樣的，M20 20表示把起點(diǎn)移到X：20，Y：20的位置上， L40 0表示把這條線連接到X：40，Y：0的位置上，然后接著連接到X：60，Y：20位置再移動(dòng)到X：80，Y：0在移動(dòng)到X：60，Y：40，接著 Z表示把這個(gè)路徑閉合，即從最后一個(gè)點(diǎn)X：60，Y：40再連接到起點(diǎn)X：20，Y：20的位置上。

stroke屬性表示邊框顏色，stroke-width表示邊框?qū)挾?，fill表示填充顏色。

svg還有很多標(biāo)簽以及屬性，不一一給你展示了。。

!DOCTYPE?html

html

head

meta?name="viewport"?content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width"?/

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/

title/title

meta?charset="utf-8"?/

/head

body

canvas?width="200"?height="200"/canvas

script?type="text/javascript"

var?canvas?=?document.getElementsByTagName("canvas")[0];

var?context?=?canvas.getContext("2d");

context.fillStyle?=?"#f0f";

context.lineWidth?=?1;

context.strokeStyle?=?"#0ff";

context.moveTo(20,?20);

context.lineTo(40,?0);

context.lineTo(60,?20);

context.lineTo(80,?0);

context.lineTo(60,?40);

context.fill();

/script

/body

/html

這個(gè)canvas效果一樣的，但是他就是一個(gè)畫板，里面畫出來(lái)的東西是死的，沒(méi)有交互的。。

代碼自己參考svg再加上自己的理解搞吧

javascript onLoad函數(shù)中canvas 畫板上畫不了圖片 卻可以畫形狀

Image加載圖片是異步運(yùn)行的，也就是說(shuō)當(dāng)你運(yùn)行到ctx.drawImage(img,0,0,200,200);時(shí)，img中的圖片還沒(méi)有實(shí)際加載完畢，因此就會(huì)出現(xiàn)空白了（這種情況只在Chrome瀏覽器出現(xiàn)，F(xiàn)ireFox中是正常的）。解決的辦法就是要預(yù)加載圖片，最簡(jiǎn)單的就是加個(gè)隱藏的img標(biāo)簽，比如：

img src="p2.gif" style="display:none" /

專業(yè)點(diǎn)的方法則要復(fù)雜一些，比如：

script type="text/javascript"

function init(){

var ctx=document.getElementById('canvas').getContext('2d');

preImage("p2.gif",function(){

ctx.drawImage(this,0,0,200,200);

});

ctx.fillRect(200,200,200,200);

}

function preImage(url,callback){

var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載

img.src = url;

if(img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)

callback.call(img);

return; // 直接返回，不用再處理onload事件

}

img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)。

callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象

};

}

/script

如何用javascript做一個(gè)類似于畫板中選顏色的那種顏色選擇板?

顏色是由red green blue三種色調(diào)組成的

創(chuàng)建一個(gè)函數(shù)，實(shí)現(xiàn)RGB隨機(jī)組合

然后拼一個(gè)table