javascript如何實現(xiàn)把界面上的點，動態(tài)的依次連接成一個封閉的圖形？

!DOCTYPE?html

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

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

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

代碼解析：svg標(biāo)簽，插入一個矢量圖，寬度200px，高度200px。可視區(qū)域是從坐標(biāo)0 0開始的200 * 200的正方形（說的很拗口。。）

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

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

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

這個canvas效果一樣的，但是他就是一個畫板，里面畫出來的東西是死的，沒有交互的。。

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

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

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

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

專業(yè)點的方法則要復(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)建一個Image對象，實現(xiàn)圖片的預(yù)下載

img.src = url;

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

callback.call(img);

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

}

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

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

};

}

/script

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

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

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

然后拼一個table

網(wǎng)站題目：javascript畫板,JAVA畫板
文章源于：http://chinadenli.net/article7/dsgisij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站收錄、微信公眾號、小程序開發(fā)、關(guān)鍵詞優(yōu)化、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)