logo
  • 教程列表
  • SO官方文檔
  • html5-canvas 教程
    • html5-canvas 入門
      • 檢測畫布上的滑鼠位置
      • 畫布大小和解析度
      • 如何將 Html5 Canvas 元素新增到網頁
      • 螢幕外的畫布
      • Hello World
      • Html5 Canvas 功能的索引使用
      • 旋轉
      • 將畫布儲存到影象檔案
    • 動畫
      • 對動畫迴圈使用 requestAnimationFrame() NOT setInterval()
      • 在畫布上為影象設定動畫
      • 使用 2D 上下文和 requestAnimationFrame 的簡單動畫
      • 以指定間隔設定動畫(每 1 秒新增一個新矩形)
      • 在指定時間動畫(動畫時鐘)
      • 不要在事件處理程式中繪製動畫(一個簡單的草圖應用程式)
      • 使用 Robert Penners 方程式緩和
      • 使用 requestAnimationFrame 設定幀速率
      • 從 x0y0 到 x1y1 的動畫
    • 使用 getImageData 和 putImageData 進行畫素處理
      • context.getImageData 簡介
    • 響應式設計
      • 建立響應式整頁畫布
      • 調整大小(或滾動)後的滑鼠座標
      • 響應式畫布動畫,無需調整大小事件
    • 媒體型別和畫布
      • 在畫布上基本載入和播放視訊
      • 載入和顯示影象
      • 繪製 svg 影象
      • 捕獲畫布並另存為 webM 視訊
    • 合成
      • 使用 destination-over 在現有形狀後面繪製
      • 使用目標輸出刪除現有形狀
      • 預設合成在現有形狀上繪製新形狀
      • 剪下影象內的形狀與目的地
      • 使用 source-in 剪輯影象內部的影象
      • 內部陰影與 source-atop
      • 反轉或否定影象有差異
      • 黑色白色與顏色
      • 增加色彩對比度飽和度
      • 棕褐色 FX 具有光度
      • 使用 globalAlpha 更改不透明度
    • 圖片
      • 使用畫布進行影象裁剪
      • Tained 帆布
      • context.drawImage 是否在 Canvas 上顯示影象
      • 縮放影象以適合或填充
    • 文字
      • 繪圖文字
      • 格式化文字
      • 將文字包裝成段落
      • 將文字段落繪製成不規則形狀
      • 用影象填充文字
      • 沿弧渲染文字
      • 曲線立方和二次貝塞爾曲線上的文字
      • 合理的文字
      • 合理的段落
    • 沿著路徑導航
      • 找到曲線上的點
      • 沿著三次貝塞爾曲線找到點
      • 沿二次曲線找到點
      • 沿著一條線找到點
      • 沿著包含曲線和線的整個路徑查詢點
      • 二次曲線的長度
      • 在位置拆分貝塞爾曲線
      • 修剪貝塞爾曲線
      • 立方貝塞爾曲線的長度(近似)
      • 尋找二次曲線的範圍
    • 碰撞和交叉點
      • 2 個圓圈是否發生碰撞
      • 2 個矩形是否發生碰撞
      • 圓和矩形是否發生碰撞
      • 2 個線段是否截獲
      • 線段和圓是否發生碰撞
      • 線段和矩形是否發生碰撞
      • 2 個凸多邊形是否發生碰撞
      • 2 個多邊形是否碰撞(允許凹凸多邊形)
      • XY 是弧的內部點
      • 是楔形內的 XY 點
      • 是圓形內的 XY 點
      • 是矩形內的 XY 點
    • 轉換
      • 快速繪製許多已翻譯的縮放和旋轉影象
      • 圍繞其中心點旋轉影象或路徑
      • 轉換簡介
      • 用於跟蹤平移的旋轉縮放形狀的轉換矩陣
    • 路徑(僅限語法)
      • 概述基本路徑繪製命令列和曲線
      • lineTo(路徑命令)
      • arc(路徑命令)
      • quadraticCurveTo(路徑命令)
      • bezierCurveTo(路徑命令)
      • arcTo(路徑命令)
      • rect(路徑命令)
      • closePath(路徑命令)
      • beginPath(路徑命令)
      • lineCap(路徑樣式屬性)
      • lineJoin(路徑樣式屬性)
      • strokeStyle(路徑樣式屬性)
      • fillStyle(路徑樣式屬性)
      • lineWidth(路徑樣式屬性)
      • shadowColor shadowBlur shadowOffsetX shadowOffsetY(路徑樣式屬性)
      • createLinearGradient(建立路徑樣式物件)
      • createRadialGradient(建立路徑樣式物件)
      • createPattern(建立路徑樣式物件)
      • stroke(路徑命令)
      • 填充(路徑命令)
      • clip(路徑命令)
    • 在畫布上拖動路徑形狀和影象
      • 如何在 Canvas 上移動形狀影象 REALLY()
      • 在畫布周圍拖動圓形矩形
      • 在 Canvas 周圍拖動不規則形狀
      • 在畫布周圍拖動影象
    • 清除螢幕
      • 矩形
      • 原始影象資料
      • 複雜的形狀
      • 用漸變清除畫布
      • 使用複合操作清除畫布
    • 圖表和圖表
      • 帶箭頭的線
      • 帶箭頭的立方二次貝塞爾曲線
      • 楔
      • 填充和描邊均為圓弧
      • 餅圖與演示
    • 陰影
      • 使用陰影的貼紙效果
      • 如何阻止進一步的陰影
      • 陰影在計算上是昂貴的 - 快取陰影
      • 新增陰影的視覺深度
      • 內陰影
    • 路徑
      • 橢圓
      • 沒有模糊的線
    • 多邊形
      • 明星
      • 正多邊形
      • 渲染圓角多邊形
  1. StackOverflow 文件
  2. html5-canvas 教程
  3. html5-canvas 入門

    html5-canvas 入門

  • 檢測畫布上的滑鼠位置 畫布大小和解析度 如何將 Html5 Canvas 元素新增到網頁 螢幕外的畫布 Hello World Html5 Canvas 功能的索引使用 旋轉 將畫布儲存到影象檔案
  • 檢測畫布上的滑鼠位置

Copyright © 2018. All right reserved

tastones.com 备案号:鲁ICP备18045372号-1

  • 關於本站
  • 免責聲明