李炎恢HTML5影片資料分享-H5教程-PHP中文網

首頁

web前端

H5教程

李炎恢HTML5影片資料分享

巴扎黑

Aug 31, 2017 am 11:57 AM

h5 html5

學習《李炎恢HTML5影片教學》影片教學，將向大家詳細介紹HTML5，HTML5是超文本標記語言（HTML）的第五次重大修改，即最新版本；它比原來的標準又增加了一些新的標籤，實現更多功能，更標準化，更適用於行動互聯網。

李炎恢HTML5影片資料分享

影片播放網址：http://www.php.cn/course/365.html

本課程的困難點在於html5新增的內容和canvas的用法：

許多畫圖效果都是使用canvas來實現的，所以學好canvas是學好HTML5的關鍵。

1. canvas 簡介

1.1 canvas 是什麼？

是HTML5中重要的元素,和audio、video元素類似完全不需要任何外部插件就能夠運行.

Canvas中文翻譯就是」畫布」.它提供了強大的圖形的處理功能(繪製,變換,像素處理…)。

但要注意，canvas 元素本身並不會繪製圖形，它只是相當於一張空畫布。

如果開發者需要在 canvas 上繪製圖形，則必須使用 JavaScript 腳本進行繪製。

1.2 canvas 能夠做什麼？

基礎圖形的繪製

文字的繪製

圖形的變形和圖片的合成

圖片和影片的處理

#動畫的實作

小遊戲的製作

1.3 支援的瀏覽器

大多數現代瀏覽器都是支援Canvas的,比如Firefox, safari, chrome, opera的最近版本以及IE9都支援.

IE8及以下不支援HTML5,但是我們可以進行提示使用者更新到最新的版本

1.4 關於canvas 標籤的基本概念

#在HTML 頁面上定義canvas 元素與定義其他普通元素並無任何不同，牠吃了可以指定id, style ,class ,hidden 等通用屬性之外，還可以設定width 和height 兩個屬性。

為什麼要特意去說這個呢？

咱們在章節 2.2 中詳細說明。

除此之外，我們在網頁中定義 canvas 元素之後，它只是一張空白的畫布，想要在畫布上繪畫，一定要經過下面幾步。

取得 canvas 元素對應的 DOM 對象，這必須是一個 canvas 物件

呼叫 canvas 物件的 getContext( ) 方法,該方法傳回一個 canvasRenderingContext2D 對象，該物件可以繪製圖形。

呼叫 canvasRenderingContext2D 物件的方法進行繪圖。

那麼我們就來開始我們的canvas 實戰，來看看 canvas 該如何會繪製圖形。

2.canvas 實戰

2.1 查看目前瀏覽器對canvas 的支援情況

我們在上面也說明了，我們的一些瀏覽器是不支援canvas 的，這時候我們該怎麼去做呢？

這時候我們可以直接在 canvas 標籤之間去書寫內容，這麼做的好處是當你的瀏覽器不支援 canvas 的時候，我們可以去展示標籤之間的內容，具體如下。

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <style type="text/css">         
  html,body{     
          margin: 0px;   
       }         
    canvas{           
      background: #ccc;     
          }     
    </style> 
 </head> 
 <body> 
  <canvas>
    我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas 
  </canvas>  
 </body>
</html>

登入後複製

既然已經創建完成了具體的內容，那我們現在可以看見了麼？

我們雖然沒有給定 canvas 的寬度和高度，但實際上我們的canvas 在頁面中是可見的。

需要注意，canvas 預設樣式的寬度和高度是 300px * 150px.

即使我們不去設定特定的寬度和高度，它也是可以顯示的。

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
  <style type="text/css">   
  html,body{    
  margin: 0px;   
  }   
  canvas{    
  background: #ccc;   
  }  
  </style> 
 </head> 
 <body> 
  <canvas>
    我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas 
  </canvas>   
 </body>
</html>

登入後複製

以上是李炎恢HTML5影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn