❶ 如何在 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方法將文本添加到畫布。
❷ ps存儲為web所用格式 錯誤，源文件750像素寬，70M左右吧！我把畫布改為480寬就能！什麼情況啊
報什麼錯？內存不足嗎？如果是那麼請你先把你的源文件備份一份，然後對photoshop做以下操作，然後重啟PS。重新打開該文件，之後再存儲為web所用格式
原理是增加存儲可操作內存，可以同時關閉電腦打開的程序，內存不足常會報錯。
❸ adobe illustrator新建文件web是什麼意思
adobe illustrator新建文件web是ps里新建預設里的Web就是一種網頁常用的規格尺寸，其實在新建文檔中那些規格沒有多大的作用，一般都是用自定義尺寸。
新建一個當前文件一樣的畫布，兩個畫布同步，你可以一個畫布用輪廓顯示，一個用顏色顯示。兩個顏色疊在一起，可以通過菜單「窗口/不透明度」面板中的疊加模式（顯示「正常」的那個），來產生兩個顏色的疊加效果。
分布式的：
大量的圖形、音頻和視頻信息會佔用相當大的磁碟空間，我們甚至無法預知信息的多少。對於Web沒有必要把所有信息都放在一起，信息可以放在不同的站點上，只需要在瀏覽器中指明這個站點就可以了。在物理上並不一定在一個站點的信息在邏輯上一體化，從用戶來看這些信息是一體的。
動態的由於各Web站點的信息包含站點本身的信息，信息的提供者可以經常對站上的信息進行更新。如某個協議的發展狀況，公司的廣告等等。一般各信息站點都盡量保證信息的時間性。所以Web站點上的信息是動態的、經常更新的，這一點是由信息的提供者保證的。
❹ photoshop中，已經製作好的一張畫布儲存為web格式時，只有一張大圖儲存在image的文件夾中，
不用切片就不要想了，你在web輸出的時候慶銀如果沒做切片，它就默認你把這個畫布做了一張切片，而且這也是唯一的一張切片。
如果你不嫌麻煩，也可以把各個圖層復制=》粘貼入新的畫布=》存儲為web格式。另外，web格式歸根到底隱汪是把切片輸出出去了，所以，所有譽攜宴輸出的圖片都是矩形的
❺ psweb模式怎麼將一張圖片放在兩個畫布上
-------
1、首先，在檔岩PSweb中打開要放置的圖片；
2、在圖片上點擊右鍵，選擇緩閉「復制」；
3、點擊「新建」，然後在新建的畫布中點擊右鍵，選擇「粘貼」；
4、再次點擊「新建」，然後在新建的畫布中點擊右鍵，選擇「粘貼」；
5、最擾蠢裂後，在兩個畫布上都可以看到放置的圖片。
❻ web界面設計規范有哪些
一、網頁尺寸
製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是：可辨識性和易讀性。
網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種：
12px是應用於網頁的最小字體，適用於非突出性的日期，版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
❼ PSCC2015新建的web畫布怎麼跟PSCS6很不一樣啊，感覺不適應
這是顯示器配置文件導致的問題，解決辦法很簡單，同時按帆畢住Ctrl+Alt+Shift三個鍵，然後啟動photoshop，會顯示「刪除配置文件」，點確認，接著又會提示「顯示器配置文態喚芹件似乎有問題」，此時選擇「忽略顯示器配置文件」並勾選「記住選擇」，然後就一切OK了！我也鏈正碰到過樓主的問題，就是這么解決的！
❽ 1. 利用Web前端技術 (1)製作一個600*600像素的畫布
web前端中的畫布指的應該就是canvas了吧，如下，創建一個600px*600px的畫布
<canvas width="600px" height="600px" />
❾ ps中圖片存儲為web格式時，圖片自動縮小了，怎麼解決
這是PS的bug，畫布總高度8000px內調整沒關系，超過了調整大小就悲劇了。解決辦法：在原畫布調整需要的總畫布大小或切片，不用保存，然後，存儲為WEB格式，你可以選擇調整品質，注意：在web存儲頁面的時候 圖像大小不要調整了。然後直接存儲，保存的文件是不會變的（你想要的大小尺寸）。