3-2 Canvas+js

Size: px

Start display at page:

Download "3-2 Canvas+js"

圈曹
6 years ago
Views:

1 網頁設計 RITA TEACHING canvas+ javascript ENTER 講師 : 田甜甜 rita.design@gmail.com

2 畫布 <canvas> <canvas> 元素能建立一個直接從瀏覽器中執行繪圖平台, 類似一個畫布本身沒有樣式, 必須使用腳本語言來繪製圖形 ( 通常是 JavaScript) 預設的畫布大小是 300px * 150px ( 寬 * 高 ) <!DOCTYPE html> <html> <body> <canvas id="my" width="200" height="100" > 您的瀏覽器不支援 canvas, 請升級您的瀏覽器 </canvas> </body> </html> <style> canvas { border:1px solid #000000; } </style>

3 渲染環境 getcontext("2d") /* 宣告一個自訂名稱為 canvas 的變數, 取得元素 <canvas> 透過 id my */ /* document 的 getelementbyid() 可以根據 Id 值取得 HTML 標籤的實例 */ 物件特性方法參數 canvas document getelementbyid 2d /* 通過 getcontext() 方法存取繪圖內容 2D 繪圖內容 2D 的 getcontext() 是內建支援 HTML5 對象的功能, 用來繪製路徑, 例如盒圓文字圖像, 和更多的其他屬性 */ var context=canvas.getcontext("2d"); <canvas> 預設為空白畫布, 需先存取渲染環境, 接著繪圖, 然後才會顯現影像透過 getcontext() 方法, 來取得渲染環境 getcontext() 參數只有渲染環境類型, 分別有 2d 3d

4 多媒體基本結構 <!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #000000; } </style> window.onload = function() { } </head> <body> <canvas id="my" width="200" height="100" > 您的瀏覽器不支援 canvas, 請升級您的瀏覽器 </canvas> </body> </html>

填色 fillrect() 畫布是一個二維網格畫布左上角的坐標為 (0,0) /* 宣告一個自訂名稱為 canvas 的變數, 取得元素 <canvas> 透過 id my */ /* document 的 getelementbyid() 可以根據 Id 值取得 HTML 標籤的實例 */ /* 通過 getcontext() 方法存取繪圖內容 2D 繪圖內容 2D 的

5 填色 fillrect() 畫布是一個二維網格畫布左上角的坐標為 (0,0) /* 宣告一個自訂名稱為 canvas 的變數, 取得元素 <canvas> 透過 id my */ /* document 的 getelementbyid() 可以根據 Id 值取得 HTML 標籤的實例 */ /* 通過 getcontext() 方法存取繪圖內容 2D 繪圖內容 2D 的 getcontext() 是內建支援 HTML5 對象的功能, 用來繪製路徑, 例如盒圓文字圖像, 和更多的其他屬性 */ var context=canvas.getcontext("2d"); /* 填入顏色 / 填入矩型 */ context.fillstyle="#ff0000"; context.fillrect(0,0,150,75); 物件特性方法 canvas document getelementbyid 坐標 fillstyle()[ 填色顏色 ], 直接輸入色碼或色彩名稱, 即可套用 fillrect() [ 填色矩型 ] 的參數 (0,0,150,75) 由左上角 (0,0) 開始畫一個 150x75 像素的矩形

6 填色運用填色運用 fillrect() <!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #000000; } </style> window.onload = function() { ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; ctx.fillrect (30, 30, 55, 50); } </head> <body> <canvas id="my" width="200" height="100" > 您的瀏覽器不支援 canvas, 請升級您的瀏覽器 </canvas> </body> </html> alpha 透明值 : 參數 rgba( 0, 0, 200, 0.5) 1 為透明度 100% 0.5 代表透明度 50%

7 填色 + 路徑運用 fillrect() clearrect() strokerect() <!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #000000; } </style> window.onload = function() { ctx.fillrect(25,25,100,100); // 矩型填色 ctx.clearrect(45,45,60,60); // 清除矩型 ctx.strokerect(50,50,50,50); // 矩型路徑 } </head> <body> <canvas id="my" width="200" height="100" > 您的瀏覽器不支援 canvas, 請升級您的瀏覽器 </canvas> </body> </html>

8 多媒體 (path) 路徑繪製 [ 產生路徑 ] beginpath(): 產生一個新路徑每一次呼叫路徑便會被重設, 即可繪製另一個新圖形 closepath(): 閉合路徑來設定新的路徑繪圖指令 [ 繪圖指令 ] 路徑 API stroke(): 畫出筆畫 fill(): 填滿路徑要在畫布上繪製直線, 我們將使用以下兩種方法 : moveto 的 (x,y) 定義了該行的起點為 (0,0) lineto 的 (x,y) 定義行的結束點為 (200,100) 然後使用 ink 的方法之一, 如 stroke() [ 筆畫 ] 方法繪製線段

9 路徑 1. 線段 lineto() ctx.moveto(0,0); ctx.lineto(200,100); ctx.linewidth=5; ctx.stroke(); ctx.beginpath(); ctx.moveto(75,50); ctx.lineto(100,75); ctx.lineto(100,25); ctx.fill();

10 路徑 2. 圓 arc() 要在畫布上畫一個圓, 我們可以使用下面的方法 : arc(x,y,r,start,stop) =>(x 軸,y 軸,r 半徑,start 起點,stop 終點 ) 要繪製圓, 我們必須使用的 ink 的方法,stroke() [ 筆畫 ] 或 fill() [ 填充 ]  ctx.beginpath();  ctx.arc( 95, 50, 40, 0, 2*Math.PI ); ctx.stroke(); // 360 度公式 = 2*Math.PI // 圓心座標

11 路徑運用 window.onload = function() { ctx.beginpath(); ctx.arc(75,75,50,0,math.pi*2,true); // 外圈 ctx.moveto(110,75); ctx.arc(75,75,35,0,math.pi,false); // 嘴 ( 順時針 ) ctx.moveto(65,65); ctx.arc(60,65,5,0,math.pi*2,true); // 左眼 ctx.moveto(95,65); ctx.arc(90,65,5,0,math.pi*2,true); // 右眼 ctx.stroke(); }

12 路徑 3. 填充字 filltext() 要在畫布上繪製文本, 最重要的屬性和方法是 : font( 字體 ) - 定義文本的字體屬性 "30px Arial" filltext(text,x,y) - 在畫布上繪製填充文本 ("Hello World",10,50) stroketext(text,x,y) - 在畫布上繪製文本 ( 無填充 ) ctx.font="30px Arial"; ctx.filltext("hello World",10,50);

13 路徑 4. 外框字 stroketext() 要在畫布上繪製文本, 最重要的屬性和方法是 : font( 字體 ) - 定義文本的字體屬性 "30px Arial" filltext(text,x,y) - 在畫布上繪製填充文本 ("Hello World",10,50) stroketext(text,x,y) - 在畫布上繪製文本 ( 無填充 ) ctx.font="30px Arial"; ctx.stroketext("hello World",10,50);

路徑 5. 線性漸層 createlineargradient() 可以使用漸變填充矩形, 圓, 線條, 文字等圖形在畫布上不局限於對純色的有兩種不同類型 : 創建一個線性漸變語法 : createlineargradient(xstart,ystart, xend, yend) 參數 xstart, ystart: 漸變的起始點的坐標 xend, yend : 漸變的結束點的坐標漸變對象,

14 路徑 5. 線性漸層 createlineargradient() 可以使用漸變填充矩形, 圓, 線條, 文字等圖形在畫布上不局限於對純色的有兩種不同類型 : 創建一個線性漸變語法 : createlineargradient(xstart,ystart, xend, yend) 參數 xstart, ystart: 漸變的起始點的坐標 xend, yend : 漸變的結束點的坐標漸變對象, 必須加入兩個或更多色標, 使用 addcolorstop() 方法指定色標顏色, 及其漸層方向位置 SSS 色標位置, 可以設定在 0 到 1 之間的任意位置透過 fillstyle 或 strokestyle 屬性繪製的形狀, 如矩形或文字等, 才能套用漸變  var grd=ctx.createlineargradient(0,0,200,0); grd.addcolorstop(0,"red"); grd.addcolorstop(1,"white");  ctx.fillstyle=grd; ctx.fillrect(10,10,150,80); grd.addcolorstop(0.2,"red"); grd.addcolorstop(0.5,"green"); grd.addcolorstop(0.8,"blue");

路徑 6. 放射性漸層 createradialgradient() 創建一個放射性漸變語法 : createradialgradient (x, y,, x, y, ) 參數 xstart, ystart: 開始圓的圓心的坐標 ( 圓心 ) radiusstart: 開始圓的半徑 xend, yend : 結束圓的圓心的坐標 radiusend: 結束圓的半徑 // Create

15 路徑 6. 放射性漸層 createradialgradient() 創建一個放射性漸變語法 : createradialgradient (x, y,, x, y, ) 參數 xstart, ystart: 開始圓的圓心的坐標 ( 圓心 ) radiusstart: 開始圓的半徑 xend, yend : 結束圓的圓心的坐標 radiusend: 結束圓的半徑 // Create gradient 創建漸層 var grd=ctx.createradialgradient(75,50,5,90,60,100); grd.addcolorstop(0,"red"); grd.addcolorstop(1,"white"); // Fill with gradient 創建角度及顏色 ctx.fillstyle=grd; ctx.fillrect(10,10,150,80);

PowerPoint 演示文稿

PowerPoint 演示文稿绘图管理科学与工程学科耿方方主要内容 Canvas 基础知识图形绘制图形变换与控制应用领域 1 游戏 2 可视化数据 :: 百度的 echart d3.js three.js 3 banner 广告 4 未来模拟器 : 无论从视觉效果还是核心功能方面来说, 模拟器产品可以完全由 JavaScript 来实现远程计算机控制 :Canvas 可以让开发者更好地实现基于 Web 的数据传输,