網頁設計教學系列-HTML5語法分享2(CANVAS)

今天要分享的HTML5語法,就是平常我們會在繪圖軟體裡面,我們會用矩形工具來畫正方形,三角形等等的,現在最新的HTML5語法,雖然還沒有一套完整規範,不過大致上的一些語意標籤,都是有規範出來的,像今天介紹的CANVAS語意標籤,就是可以用來畫正方形,三角形,透過HTML5語法即可,一起來看看!

這邊沒有做各瀏覽器測試,只是單純分享HTML5語法,所以大致上以能支援HTML5語法的瀏覽器為主,像是CHROME,FIREFOX,IE9等,

比如今天我們想要畫一個正方形:

在這邊的做法,透過HTML5必須要搭配JAVASCRIPT才能畫出來,以下是程式碼,

<!DOCTYPE HTML>
<html>
<title></title>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var m_canvas = document.getElementById('m');
var m_ctx = m_canvas.getContext('2d');

if(m_ctx) {
m_ctx.fillStyle = "rgb(0,200,0)";
m_ctx.fillRect (10, 10, 100, 100);
}
else {
alert("只有CHROME瀏覽器或firefox 3.6以上的瀏覽器才能看到完整網站內容")
}

}
</script>
</head>
<body onload="draw_m()">
<canvas id="m" width="100" height="100"></canvas>
</body>

</html>

講一些比較重要的部分:

m_ctx.fillStyle = “rgb(0,200,0)":這一個意思代表要正方形什麼顏色!

m_ctx.fillRect (10, 10, 100, 100); :(x,y,寬度,高度),x,y代表從那一象限開始!

其它像寫if 和 else,就是怕遇到不支援HTML5語法的瀏覽器,所以要這樣子寫,

像<body>必須要先讀JAVASCRIPT語法,在透過<canvas>畫出來即可,這是正方形部分。

現在比如我們想要三角形,

程式碼如下,

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">

function draw_m() {
var canvas = document.getElementById("t");
if(canvas.getContext){
var ctx = canvas.getContext('2d');

// 填好顏色的三角型
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(50,200);
ctx.fill();

// 藍色邊框的三角形
ctx.beginPath();
ctx.moveTo(80,80);
ctx.lineTo(200,100);
ctx.lineTo(100,200);
ctx.closePath();
ctx.strokeStyle="rgb(0,0,200)";
ctx.stroke();
}
else {
alert("只有CHROME瀏覽器或firefox 3.6以上的瀏覽器才能看到完整網站內容")
}
}

</script>
</head>

<body onload="draw_m()">
<canvas id="t" width="220" height="220"></canvas>
</body>
</html>

一樣講一些比較重要部分,

ctx.beginPath():開始畫圖形路徑

ctx.moveTo(50,50):從50 50 x y軸,做為起點

ctx.lineTo(200,50):連到200 50 x y軸位置

ctx.fill():把三角形填滿顏色

ctx.stroke():邊框顏色填滿

 

以上這兩個還滿簡單的canvas語意標籤就介紹給大家,這個語意標籤還可以畫很多圖形,就請大家發揮想像力去畫吧! 

熱門相關文章

網頁設計教學系列-使用JQUERY引導網友使用你網站
最近在學這個,也比較想要扎實在這上面,所以之後學到什麼就分享什麼,今天要講的東西,有點算是導覽的部分,你要如何讓網友知道你的網站從那邊開始點,所以你可以以按鈕顏色,來明確標示那些網友可以點,一起來看看今天的分享! 比如今天我們想要達到這樣的效果, 這邊分享HTML5語法寫法, <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQUERT基礎語法教學</title> <style> div{ font-size:12px; border:1px solid #003a75; margin:5px; } p{ margin:0px; padding:10px 10px; } .myClass{ background-color:#fff000; text-decoration:underline; } </style> <script type="text/javascript" ...
繼續閱讀
網頁設計教學系列-製作多層選單+JQUERY收合效果
上次一篇是介紹如何製作多層選單的概念,這一篇的話,就是要介紹加上JQUERY效果的部分,因為有時候我們製作MENU可能分類很多,所以有時候需要下拉式選單的部分,而這邊介紹的是要如何把分類的部分,做成樹狀的概念,就是開,收合這樣,一起來看看今天這篇的教學部分! 首先我們先看到要完成的效果是如何, 第二層和第三層選單有收合部分效果存在,所以這篇要介紹大概如何製作,這是這篇程式碼的部分,這次有在每個部分做個細節的講解, <!DOCTYPE html> <html> <head> <title>多層選單製作JQUERY</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ $("li:has(ul)").click(function(e){ if(this==e.target){ if($(this).children().is(":hidden")){ //子項是隱藏的則顯示 $(this).css("list-style-image","url(minus.gif)") .children().show(); }else{ //子項是顯示的則隱藏 $(this).css("list-style-image","url(plus.gif)") .children().hide(); } } return false;    //避免不必要的事件混繞 }).css("cursor","pointer").click();    //手的符號 //對於沒有子項的選單,一律表示 $("li:not(:has(ul))").css({ "cursor":"default", "list-style-image":"none" }); }); </script> </head> <body> <ul> <li>第一層選單</li> <li>第二層有樹狀的 <ul> <li>樹狀選單</li> </ul> </li> <li>第三層(兩階層) <ul> <li>3-1階層的 <ul> <li>3-2階層的</li> </ul> </li> </ul> </li> </ul> </body> </html> 今天主要講解的是$FUNCTION那一段,這邊我們有li有ul部分,增加一個點擊事件,按下去的話,如果你的選單有子項的,就會顯示url(minus.gif)這個圖片部分,相反的在點擊就是顯示url(plus.gif),CSS部分就請大家自己研究囉,至於.children就是子選項的意思,show和hide分別是顯示和隱藏,最後用一張程式碼圖讓大家更清楚明白了解囉。
繼續閱讀
網頁設計教學系列-用HTML5語意標籤排成三欄版的
最近都在學這個部分,所以有學到什麼,就開始分享什麼啦,今天分享的也是排版系列,因為我覺得不管學任何一個套件軟體,基本的排版你還是要有些概念存在,不然到時候就算架WORDPRESS,結果CSS部分都不太懂,這樣也不是說很好,所以一起來看看今天的教學吧! HTML5排版 比如今天我們想要排成這樣子, 寬螢幕的CHROME是這樣子, 這邊分享的語意標籤還是一樣基本的為主, <header>代表上方區塊橫幅 <article>代表主要內容 <aside>代表側欄 <footer>指得是底部區塊 最後分享今天寫的語法,CSS部分就要麻煩大家自己去翻一下書了, <!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5排版測試</title> <style> body{ min-width:1024px; margin-top:0px; } #total{ margin:0 auto; width:1024px; } header{ background:#0066CC; width:1024px; height:250px; } article{ background:#F90; width:350px; height:100px; float:left; } #main2 { background:#FF0; width:350px; height:100px; float:left; } aside{ background:#000; width:323px; height:100px; color:#FFFFFF; float:left; } footer{ background:#666; width:1024px; height:300px; clear:both; } </style> </head> <body> <div id=total> <header id=top> 橫幅 </header> <article ...
繼續閱讀
網頁設計教學系列-HTML5語法分享!
今天要介紹的東西,就是最近還滿夯的HTML5,這篇只是從一些基礎的東西開始分享,大概了解基本的觀念而已,之後如果學到更多好玩的東西,再一次分享給大家,不過昨天這樣摸一摸,還滿佩服賈伯斯所帶來當的創意,雖然HTML5還沒有真正完全到答一個標準,不過我想這是遲早的趨勢,一起來看! 比如我們呈現效果像下圖這樣,以前用HTML4語法也很簡單,就很多區塊設DIV就行了,這邊要分享HTML5的寫法, HTML5文件檔頭簡單設定 以往我們熟悉的HTML語法,剛開始文件一開頭都會這樣寫, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 但HTML5的文件一開頭寫法相當簡單,只要像下圖這樣寫就可以 <!DOCTYPE html> 寫法變得相當簡單, 我們從WORDPRESS預設佈景也看到是這樣子寫的 <!DOCTYPE ...
繼續閱讀
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!
今天要分享的東西,可能從標題看不太出來在講什麼樣的意思,這邊今天要講的,就是網頁設計的爸爸和小孩,也就是父區塊和子區塊,有時候在1024X768看到的是子區塊,在1366X768看見的是父區塊和子區塊的結合,這樣做的好處就是不會在不同解析度下,所呈現出來的感覺不會差太多,讓我們來看看今天的教學! 比如我們今天看到一個部落格網站長這樣子,這是1024X768的解析度畫面, 不過在其他的寬螢幕和筆電可能是這樣子,比如1366X768,   或許是現在圖片尺寸關係,所以有點看不出來,不過如果在做網頁如果遇到不同解析度的話,是件麻煩問題,所以通常我們都會設父區塊和子區塊,比如今天我們設一個父區塊和子區塊, 之後我們在為這兩個區塊寫上CSS背景顏色,這邊是原始碼, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...
繼續閱讀
網頁設計教學系列-使用JQUERY引導網友使用你網站
網頁設計教學系列-製作多層選單+JQUERY收合效果
網頁設計教學系列-用HTML5語意標籤排成三欄版的
網頁設計教學系列-HTML5語法分享!
網頁設計教學系列-做出在兩個不同解析度所呈現出來的效果!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>