Ⅰ 如何進行web頁面原型圖設計
最後半天心不在焉拖拖拽拽把各個部分都搭建好了，可是做出來的頁面慘不忍睹，自己都沒勇氣打開。晚上回家後和鄰居又討論了三個小時，最後熬夜把原型圖完成。雖然最後原型圖也沒有被採納，但是這次原型圖居然受到了表揚，領導說我的原型圖有了提升。今天就寫下這篇文章，為這段時間的工作做一個總結。原型設計前：①�0�2�0�2 重點突出內容：要清楚明了頁面需要突出的內容是什麼，這個在前期的討論中一般就已經確定；②�0�2�0�2 第一功能目的：除了內容以外，功能方面需要突出的是什麼？如引導注冊或像下一級頁面引導流量。③�0�2�0�2 如果是改版要考慮改版要解決的問題是什麼？對於前一版頁面存在什麼問題 畫原型圖要考慮：④�0�2�0�2 內容板塊如何劃分，頁面的內容主要分成幾個模塊，每個模塊內存放的都應該是一些相近的內容；⑤�0�2�0�2 模塊與模塊之間的關聯性：每個模塊與其相近的模塊之間應該有一些邏輯上的關聯性，而不能隨意的進行拼接；⑥�0�2�0�2 頁面的流程：模塊與模塊的上下承接關系，模塊與模塊應該上下存在某些邏輯上的連接性。 頁面完成後：完成原型圖後一定要進行檢查，主要從以下三個方面進行檢查：⑦�0�2�0�2 內容是否完整：對比框架中的每一部分內容檢查是否完整；⑧�0�2�0�2 第一屏是否把最重要的內容展現出來：頁面第一屏以外的內容基本都是輔助內容，如果不能在第一屏就把內容全部展現，基本上就等於內容不完整；⑨�0�2�0�2 功能是否實現：想要表達的功能是否在明顯的地方表現出來；⑩�0�2�0�2 流程是否順暢：把相應的流程走一遍，看是否流暢。 注意tips：①�0�2�0�2 未完成的作品拿出來討論頁面不完整不代表思想不完整，即使是不完整的頁面，裡面應該也要有一個清晰的邏輯圖。通過這種方法可以強迫自己想明白再下手。②�0�2�0�2 理清自己的思路要有屬於自己的清晰思路，對內容、功能和流程自己要先想明白，可以列舉一些具體的問題來輔助理清自己的思路。③�0�2�0�2 堅持自己的想法每一個人都有自己的想法，只要你理清自己的思路，就一定要堅持下去。用自己的邏輯解答別人的疑惑和質疑，形成自己的思路。 關於工具和作圖：之前花了很多時間去研究axure，是學會了一些作圖的技巧，可是漸漸發現這些對頁面的提高基本不大，我是覺得在掌握基本的工具使用時可以暫時忽略工具。頁面最重要的是你的想法，等到想法成熟之後不妨慢慢的考慮工具的深入，太多的考慮技巧方面的問題反而會模糊視線。思考的過程和畫圖的時間可以在7:3都無所謂，前期的框架和流程思路想好後，後面的原型圖也就水到渠成了。
Ⅱ html5 canvas繪圖有什麼用
html5 canvas 元素的作用就是描繪出圖形，比如畫圓，扇形，折線圖等，有了這個，這些功能都是很好實現的。
Ⅲ 誰知道在web上畫圖的工具，可以像在window上的畫圖工具一樣用滑鼠隨便畫
card.163.com
隨便畫,這個才爽,而且喜歡畫的人這里很多,有點畫很漂亮
點擊製作魔法信出來這個網址http://cards.163.com/mfx/
Ⅳ java web中，如何在頁面上畫圖。
http://www.htmleaf.com/ziliaoku/qiananjiaocheng/201502101363.html
這個網址是用html5 canvas做的一個畫圖板 有源碼 （滑鼠右鍵下筆）
Ⅳ web項目開發中，正常的美工會不會寫html還是只會畫圖
現在的項目中，後端的開發會前端的東西，有一些公司為了節省，要求前後都要一個人完成，這樣的公司確實不需要前端程序員，但是還是會找兼職的前端程序員。但是後台開發的對前端只是熟悉狀態，很少做到精通，即使做到也會懶得去寫前端，後台的業務本來就已經復雜，如果都交給後台開發者，那麼工期會很長，增加開發成本。前端程序員還是有必要招聘的，分工明確，減少開發工期。這個也是一個團隊
Ⅵ 做web前端開發 需要繪圖嗎
這位網友你好，現在一般的公司分工都很明確，web前端開發只需要切圖即可，繪圖工作會由專門的UI設計師來完成，當然不排除一些小公司為了省錢讓一個人做幾個人的工作……
Ⅶ 如何在網頁上實現畫圖功能，3D
你可以先去【繪學霸】網站找「3d建模」板塊的【免費】視頻教程-【點擊進入】完整入門到精通視頻教程列表： www.huixueba.net/web/AppWebClient/AllCourseAndResourcePage?type=1&tagid=307&zdhhr-11y04r-1388181060830013420
想要系統的學習可以考慮報一個網路直播課，推薦CGWANG的網路課。老師講得細，上完還可以回看，還有同類型錄播課可以免費學（贈送終身VIP）。
自製能力相對較弱的話，建議還是去好點的培訓機構，實力和規模在國內排名前幾的大機構，推薦行業龍頭：王氏教育。
王氏教育全國直營校區面授課程試聽【復制後面鏈接在瀏覽器也可打開】： www.huixueba.com.cn/school/3dmodel?type=2&zdhhr-11y04r-1388181060830013420
在「3d建模」領域的培訓機構里，【王氏教育】是國內的老大，且沒有加盟分校，都是總部直營的連鎖校區。跟很多其它同類型大機構不一樣的是：王氏教育每個校區都是實體面授，老師是手把手教，而且有專門的班主任從早盯到晚，爆肝式的學習模式，提升會很快，特別適合基礎差的學生。
大家可以先把【繪學霸】APP下載到自己手機，方便碎片時間學習——繪學霸APP下載： www.huixueba.com.cn/Scripts/download.html
Ⅷ asp.net中如何在web頁面上畫圖
在一個網頁上加Image控制項，圖像鏈接到另一個aspx網頁上,如DrawPic.aspx,在DrawPic.aspx.cs的Page_Load中用Graphics畫好圖並存為Bitmap對象，如bm，然後bm.Save(Response.OutputStream, ImageFormat.Gif);
Ⅸ ava在web上畫圖的控制項呢， 有一個java web的項目，需要在web上做一些圖像處理， 有沒有合適的技術和控制項
看你的需求如何了。如果是需要像Photoshop那樣， 可以用《Flash Image Editor 基於web在線圖像/照片編輯控制項》， 你用網路搜索一下。 如果是畫矢量圖， 可以使用多比控制項， 可以網路一下。如果是甘特圖的話，可以使用龍博甘特圖。
Ⅹ 如何在 HTML5 畫布上繪圖
步驟 1: 在 HTML 中設置畫布，創建一個引用，並獲取上下文對象
畫布在 HTML 中通過 <canvas> 標簽定義。與其他標簽類似，<canvas> 的屬性（如寬度和高度）作為特性輸入。假設你希望創建一個寬 500 像素、高 500 像素的畫布，並將其命名為「can1」，稍後在 JavaScript 中引用它時將用到。
在 HTML 文檔中輸入 <canvas> 標簽。
<canvasid="can1"width="500"height="500"></canvas>
在 JavaScript 文檔中，創建一個變數，在編寫腳本時該變數將代替「can1」。這里，我們將該變數命名為「myCanvas」，並使用getElementById將其鏈接到「can1」。
varmyCanvas=document.getElementById("can1");畫布的CanvasRenderingContext2D對象具有操作畫布的所有命令。 這里，在上下文對象中檢索「can1」。將此變數稱為「myContext」。
varmyContext=myCanvas.getContext("2d");步驟 2: 繪制矩形、直線、貝塞爾曲線、圓和形狀
在畫布上繪制簡單的線條非常容易。使用 JavaScript 的moveTo方法可設置線條開始位置的坐標。然後只需使用另一方法設置終點。 第二步可以使用若干方法，每種方法專用於幫助呈現一種不同的線型，無論是直線、貝塞爾曲線還是圓弧。若要將線條合並為形狀，可以閉合對beginPath和closePath方法調用中的線條。在指定所需的外觀之後，可以使用fill方法應用顏色，並使用stroke方法執行線條和形狀的呈現。
應用一些基本風格。這里，通過使用fillStyle屬性繪制一個黑色矩形，將畫布背景設置為黑色 (#000)。然後使用strokeStyle屬性將線條顏色設置為白色 (#fff)，使用fillRect方法應用黑色背景，並使用lineWidth屬性將線條的粗細設置為 3 個像素。
//Specifyablackbackground,.
myContext.fillStyle='#000';
myContext.strokeStyle='#fff';
myContext.fillRect(0,0,500,500);
myContext.lineWidth=3;myContext.fill();
在後續步驟中，將在這個 500×500 的黑色畫布上繼續構建。
現在，准備在畫布的黑色表面繪制一個白色線條。先從直線開始。
使用moveTo方法設置直線的起點，使用lineTo方法設置終點。
這些方法採用兩個數字作為參數。第一個數字表示 x 軸坐標，或者表示此坐標定義的自畫布左側算起的像素數。第二個數字是從頂部開始測量的 y 軸坐標。
//ht.
myContext.moveTo(0,0);
myContext.lineTo(500,500);
myContext.stroke();
若要繪制二次貝塞爾曲線，請使用quadraticCurveTo方法，該方法採用兩個坐標—曲線的一個控制點和一個端點。
//.
myContext.moveTo(0,0);
myContext.quadraticCurveTo(0,500,500,250);
myContext.stroke();
若要繪制三次貝塞爾曲線，請使用bezierCurveTo方法，該方法採用三個坐標—曲線的兩個控制點和一個端點。
//DrawaV-.
myContext.moveTo(0,0);
myContext.bezierCurveTo(500,820,0,500,500,0);
myContext.stroke();
若要創建一個圓，請使用arc方法：在設置用於繪制圓形輪廓的原點時，請確保將moveTo方法設置在沿線條路徑的位置上，否則圓上將有一條通向moveTo坐標的「尾巴」。
//.
myContext.moveTo(500,250);
myContext.arc(250,250,250,0,Math.PI*2,true);
myContext.stroke();
通過閉合對beginPath和closePath調用中的多個線條，可以從上述線條的任意組合中繪制一個 2D 形狀。然後，整個形狀可以使用fill接收一種顏色。前面設置的筆劃樣式將創建白色線條，在與應用於主體的紅色 (#f00) 合並時，該形狀將繼承雙色調外觀。
//.
myContext.fillStyle='#f00';
myContext.beginPath();
myContext.moveTo(250,0);
myContext.lineTo(0,250);
myContext.lineTo(250,500);
myContext.lineTo(500,250);
myContext.closePath();
myContext.fill();
步驟 3: 顯示點陣圖圖像
點陣圖圖像（如 .jpg、.png 和 .gif 文件）可以放置在畫布上，甚至可以在代碼中縮放和裁剪，不會觸及原始文件。若要添加點陣圖圖像，請指定該圖像的 URI，然後使用drawImage方法在畫布上指定其位置。使用可選參數可將圖像縮放到指定的大小，甚至僅顯示圖像的一個片段，這對於實現滾動背景或使用子畫面表動態顯示子畫面等操作非常有用。
若要在屏幕上繪制點陣圖圖像而不進行任何修改，請指定要用於左上角的 x 坐標和 y 坐標。
//(0,0).
varmyImg=newImage();
myImg.src='myImageFile.png';
myContext.drawImage(myImg,0,0)
若要縮放圖像，可在末尾添加兩個數字，分別代表寬度和高度。如果有幫助，不妨將後兩個數字視為「右部」和「底部」，而不是「寬度」和「高度」。
//.
varmyImg=newImage();
myImg.src='myImageFile.png';
myContext.drawImage(myImg,0,0,500,500)
若要僅使用圖像的一個切片，則需要定義兩個矩形區域，對drawImage的調用提高到 9 個參數（第一個參數是 JavaScript 圖像對象）。要傳入的前四個數字表示圖像的切片。後四個數字表示要顯示該切片的畫布區域。
//500canvas.
varmyImg=newImage();
myImg.src='myImageFile.png';
myContext.drawImage(myImg,0,0,20,20,0,0,500,500);
步驟 4: 漸變
任何人只要熟悉在圖形設計程序中定義漸變的常見方式，都會喜歡使用 JavaScript 代碼定義漸變的簡單性。在設計程序中是選擇顏色，漸變中的顏色位置使用水平滑塊設置。JavaScript 中的唯一區別是使用從 0 到 1 范圍內的小數值代替滑塊。
在設計程序中，線性漸變使用線條在圖像上定位，線條的開始和結束位置確定方向和縮放級別。在 JavaScript 中，該線條使用兩對 x、y 軸坐標繪制。然後將 4 個數字傳遞到createLinearGradient方法以創建CanvasGradient對象。在定義漸變對象的屬性之後，就會得到所需的漸變，CanvasGradient作為fillStyle傳遞到fillRect方法進行呈現。
//Renderawhite,.
varmyGradient=myContext.createLinearGradient(0,0,500,500);//
myGradient.addColorStop(0,"#fff");//
myGradient.addColorStop(0.5,"#f00");//redinthemiddleofthegradient
myGradient.addColorStop(1,"#000");//blackattheendofthegradient
myContext.fillStyle=myGradient;//
myContext.fillRect(0,0,500,500);//
徑向漸變的定義方式稍有不同。為漸變的起點和終點繪制兩對 x、y 軸坐標—，這與線性漸變中一樣—，但每個坐標對都有第三個與其關聯的 z 軸坐標，用於定義半徑。可以想像為圍繞一個坐標繪制一個圓，該坐標位於中心 (250, 250)，繪制的圓的大小以像素為單位定義。這樣定義兩個圓之後，一個圓較小，一個圓跨整個畫布，有 6 個數字傳遞到createRadialGradient。在呈現時，徑向漸變在兩個圓之間的空間中繪制，顏色等級與圓的半徑的大小成正比。
//Renderawhite,.
varmyGradient=myContext.createRadialGradient(250,250,0,250,250,500);//
myGradient.addColorStop(0,"#fff");//
myGradient.addColorStop(0.5,"#f00");//redinthemiddleofthegradient
myGradient.addColorStop(1,"#000");//blackattheendofthegradient
myContext.fillStyle=myGradient;//
myContext.fillRect(0,0,500,500);//
步驟 5: 動畫
可以使用多種方法繪制動畫。
對於畫布內的元素，JavaScript 提供了setInterval方法，該方法計劃一個重復調用的函數，每經過定義的時間間隔便調用一次該函數。在該函數中，需要重繪畫布來反映對其上呈現的對象的更改。下面是一個示例，其中一個函數初始化該動畫，將呈現頻率計劃為大約每秒 60 幀（每 13.33 毫秒一幀），並且重復調用該函數將重繪畫布。在本例中，徑向漸變從一個小點逐漸增大，直到填充整個畫布。
//.
//.
varmyCanvas;
varmyContext;
varouterBoundary=0,innerBoundary=0;
//Starttheanimation.
window.onload=initialize;
functioninitialize(){
myCanvas=document.getElementById("can1");
myContext=myCanvas.getContext("2d");
setInterval("redrawCanvas()",13);//redraw@
}
//Runtheanimation.
functionredrawCanvas(){
if(outerBoundary<500){
outerBoundary++;//growthesizeofthegradient
}else{
innerBoundary++;//
}
varmyGradient=myContext.createRadialGradient(250,250,innerBoundary,250,250,outerBoundary);
myGradient.addColorStop(0,"#fff");//
myGradient.addColorStop(0.5,"#f00");//redinthemiddleofthegradient
myGradient.addColorStop(1,"#000");//blackattheendofthegradient
myContext.fillStyle=myGradient;//
myContext.fillRect(0,0,500,500);//
}
CSS3 轉換和動畫可用於轉換畫布本身和畫布外部的對象。
此外，新的 WinJS 庫有許多高度優化的動畫，創建這些動畫是為了模擬原有 Windows 動畫的行為。 WinJS 動畫有助於為你的應用 UI 提供一個高度集成的外觀。有關詳細信息，請參閱WinJS.UI.Animation 命名空間。
步驟 6: 更多 HTML5 畫布提示
可以使用一系列屬性（shadowColor、shadowBlur、shadowOffsetX和shadowOffsetY）應用陰影。
可以使用createPattern方法作為一種模式重復畫布中的元素。
可以使用save方法保存畫布狀態，然後執行更改，再使用restore方法還原以前的狀態。該方法很好用，函數甚至不需要採用參數。
可以使用globalCompositeOperation屬性定義兩個畫布元素重疊時會發生什麼情況。 使用此屬性始終可以定義在源或新元素級別發生的情況。可以執行的操作有顏色混合、遮蔽和更改重疊優先順序等。
注意globalCompositeOperation主題使用源表示新元素，使用目標表示以前存在的元素。
可以使用strokeText方法將文本添加到畫布。