注冊登錄
首頁 > 課程庫 > HTML5繪圖
HTML5繪圖

HTML5繪圖

HTML5提供了Canvas元素,允許腳本語言動態渲染位圖像。Canvas由一個可繪制地區HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問該地區,通過一套完整的繪圖功能類似于其他通用二維的API,從而生成動態的圖形。本課程詳細講解了HTML5繪圖的基本方法,包括文字、路徑、圖像和漸變等內容,最後以一個單機版的五子棋項目來證明HTML5繪圖功能的強大。

Web前端開發

14章節|44613次播放

查看課程視頻 學習交流群
304894765
3小時學習時長
更全面的職業課程大綱立即查看
  • 學習HTML5

    HTML5繪圖基礎

    HTML5繪圖屬于HTML5裏面的一部分,這個課程只給大家講HTML5繪圖的api。那這一小節呢!我們看HTML5繪圖的基礎。HTML5繪圖基礎1.在HTML5以前的時代,前端開發者無法在HTML頁面上動態地繪制圖片。如果想要在前端動態的畫出圖片,我們就需要後端的服務器來生成圖片,不斷的修改前端的D... 查看原文

  • 學習HTML5

    HTML5畫圖程序

    開發工具:我是用的是HBuilder。大家可以使用像記事本一樣,dreamware一樣的工具,都可以。1.我們新建一個HTML5的項目,命名爲html5_canvas2. 我們打開這個項目,裏面有一個默認的index.html文件,打開之後,這裏面就是一個HTML5的結構,在它上面進行畫圖。3. 首... 查看原文

  • 學習HTML5

    HTML5繪制幾何圖形

    HTML5繪制幾何圖形的兩個方法1. filleRect(float x,float y,float width,float,height)它是填充一個矩形2. strokeRect(float x,float y,float width,float,height)它是畫一個空心的矩形。HTML5並... 查看原文

  • 學習HTML5

    HTML5繪制字符串

    對象(CanvasRenderingContext2D),我們都把它叫做ctx,繪圖主要用這個對象的API來進行。繪制文字的兩個方法1.fillText(String text,float x,float y,[float maxwidth]):填充字符串凡是有fill,就是填充一個實心的字符串。這... 查看原文

  • 學習HTML5

    HTML5設置陰影

    設置陰影涉及到4個屬性1. shadowBlur:陰影模糊度,浮點數越大越模糊。2. shasowColor:陰影顔色。3. shadowOffsetX: x方向的偏移4. shadowOffsetY: y方向的偏移代碼演示:文字設置陰影1.  複制一下index4.html,重命名爲index5.... 查看原文

  • 學習HTML5

    HTML5畫直線

    Ctx繪制路徑的步驟是以下4步1. 調用CanvasRenderingContext2D對象的beginPath()方法開始定義路徑。2. 調用CanvasRenderingContext2D的各種方法添加路徑,比如添加一段弧或者貝賽爾曲線。3. 調用CanvasRenderingContext2D... 查看原文

  • 學習HTML5

    HTML5畫弧線

    arc()不只是可以畫弧,因爲圓也算由弧構成,所以畫圓也可能用到它。 寫個程序來畫圓注意我們畫圖的方式是這樣的,beginPath。然後在設置完路徑之後,closePath最後才是正式繪制(填充)之前設置的路徑。那我們現在來看這個arc是怎麽用的?這裏面有幾個參數1) 第一個是中心坐標的x坐標,因爲... 查看原文

  • 學習HTML5

    HTML5畫切線間的弧

    arc()方法是繪制一個圓以及圓的一部分。arcTo()方法在畫布上創建介于兩個切線之間的弧/曲線原理演示1.  啓動畫圖工具2. 先把路徑移動到這個點,然後從這個點到另外一個點畫一條線3. 畫了一條線之後,再來一個點,也就是拿3個點來確定的一個弧4. 這個弧就是它倆的切線代碼演示:arcTo()方... 查看原文

  • 學習HTML5

    三次貝賽爾曲線繪制

    查看HTML5的參考手冊(三次貝賽爾曲線)這有一個圖表示的很形象我們要畫這樣的一個曲線,有4個點來決定的1) 第一個點是控制點的開始。(20*20)2) 第二個點是(20*100)。3) 第三個點是控制點2(200*100)4) 第四個點是結束點(200*20)注意這是兩條切線,然後這樣的組成的一條... 查看原文

  • 學習HTML5

    二次貝賽爾曲線繪制

    二次貝賽爾曲線怎麽用1) 這裏有開始點(20,20),控制點(20,100),結束點(200,20)。2) 這個就是拿兩條線來確定一個弧線,但是這個弧線。之前我們學過兩條切線中間的這個是圓,圓的話是要指定半徑的。這個地方是不用半徑來控制一條線。代碼演示:二次貝賽爾曲線的使用如何確定方法參數坐標點?1... 查看原文

  • 學習HTML5

    HTML5線性漸變

    HTML5支持的填充有3種漸變1. 一種叫線性漸變 • 線性漸變– CanvasGradient代表漸變填充– CanvasPattern代表位團填充• 使用漸變步驟– step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient對象– s... 查看原文

  • 學習HTML5

    HTML5圓形漸變

    代碼演示:如何使用圓形漸變我們查看一下這個API文檔,這裏詳細解釋了創建圓形漸變的方法的幾個參數。我們寫代碼爲:運行看看結果圓形漸變的原理1) 它産生的這個圓,第一個圓心是70,50。假如這個坐標點在這兒:這個半徑是5,這就是第一個圓。2) 那第二個圓的圓心是90,60。假如圓心在這裏。它的半徑是1... 查看原文

  • 學習HTML5

    HTML5繪制位圖

    HTML5繪圖主要用到一個方法就是drawImage(Image image,x,y)。這裏面的參數是比較多。1) img 規定要使用的圖像、畫布或視頻。是要畫制Image對象的一個DOM對象。2) sx 可選。開始剪切的 x 坐標位置。3) sy 可選。開始剪切的 y 坐標位置。4) swidth... 查看原文

  • 學習HTML5

    HTML5初始化棋盤

    最後我們給大家做一個綜合的實例,就是我們使用HTML5來實現一個簡單的五子棋。前期准備用到的素材,3張圖片。一個黑子,一個白字,一個棋盤背景。所以把這3個背景圖片做一個複制,粘貼到HBuilder裏面,放到Image裏面去。代碼演示1.新建一個文件,命名爲game.html2.首先新建一個畫板,把它... 查看原文

  • 學習HTML5

    HTML5算出下棋的坐標

    這節我們來做一個案例:點擊一下棋盤,就在棋盤上落下一個子。代碼演示定義兩個全局變量,然後給這兩個全局變量指向兩個圖片對象這兩個變量分別指向 白子和黑子這兩張圖片。var black=new Image();var white=new Image();black.src="img/black.png"... 查看原文

  • 學習HTML5

    HTML5五子棋輸贏算法

    在上一小節中,我們實現了五子棋的畫子,在這一節我們實現五子棋輸贏的算法。我們接下來要做的就是,當下滿5個白子或者5個黑子的時候,讓它贏。水平方向上的輸贏其實我們每點擊一次棋盤落子,都把這個棋子的信息記錄在了這個maps裏面了。當我們每次點擊一個鼠標下子的時候,都要判斷一下,這個數組的橫向黑子或者是白... 查看原文

  • 學習HTML5

    HTML5繪圖總結

    HTML5的繪圖基礎 • 在HTML5以前的時代,前端開發者無法在HTML頁面上動態地繪制圖片• HTM5新增了一個<canvas../>元素,相當于一個畫布,可以獲得一個CanvasRenderingContext2D對象• CanvasRenderingContext2D提供了很多畫圖API H... 查看原文

  • 源代碼所屬章節:源代碼
    下載
Web前端開發劉慧濤

劉慧濤

TA的課程

潛心鑽研網絡技術10余年,8年軟件開發與網站架構經驗,精通web前端技術、Java EE、B/S結構軟件開發流程與管理,RedCMS開源項目創始人。

更專業的職業課程

Web前端開發23671位同學正在學習

Web前端開發

免費領取價值1888元求職寶典!

客服熱線 400-862-8862

回到頂部