超多經典 canvas 實例，動態離子背景、移動炫彩小球、貪吃蛇、坦克大戰、是男人就下100層、心形文字等等等

来源:http://www.cnblogs.com/bxm0927/archive/2017/08/13/7354431.html
-Advertisement-
Play Games

超多經典 canvas 實例 普及：<canvas> 元素用於在網頁上繪製圖形。這是一個圖形容器，您可以控制其每一像素，必須使用腳本來繪製圖形。 註意：IE 8 以及更早的版本不支持 <canvas> 元素。 貼士：全部例子都分享在我的 GayHub - https://github.com/bxm ...


超多經典 canvas 實例

普及：<canvas> 元素用於在網頁上繪製圖形。這是一個圖形容器，您可以控制其每一像素，必須使用腳本來繪製圖形。

註意：IE 8 以及更早的版本不支持 <canvas> 元素。

貼士：全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special

尤雨溪個人主頁炫彩三角紐帶效果，點擊還可變換

GitHub源碼 、 Demo演示

知乎登錄註冊頁動態離子背景效果

GitHub源碼 、 Demo演示

基於 canvas 的五子棋完整功能實現

GitHub源碼 、 Demo演示

基於 canvas 的《是男人就下100層》小游戲完美實現

GitHub源碼 、 Demo演示

毛筆字書寫田字格，可以寫字

GitHub源碼 、 Demo演示

隨心而動，隨刃而行。輸入文字顯示動畫粒子特效

GitHub源碼 、 Demo演示

滑鼠移動炫彩小球

GitHub源碼 、 Demo演示

2048

GitHub源碼 、 Demo演示

貪吃蛇

GitHub源碼 、 Demo演示

看你有多色

GitHub源碼 、 Demo演示

坦克大戰

GitHub源碼 、 Demo演示

宇宙行星旋轉特效

GitHub源碼 、 Demo演示

支付寶咻咻咻動畫特效

GitHub源碼 、 Demo演示

程式員表白代碼

GitHub源碼 、 Demo演示

心形文字

GitHub源碼 、 Demo演示

照片牆

GitHub源碼 、 Demo演示

License

The code is available under the MIT license.

<marquee>不斷更新，歡迎補充！</marquee>

 

 

!

canvas 簡介

<canvas> 元素用於在網頁上繪製圖形。這是一個圖形容器，您可以控制其每一像素，必須使用腳本來繪製圖形。

<canvas> 標記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

註意：IE 8 以及更早的版本不支持 <canvas> 元素。

 

 

!

canvas 初體驗

<canvas id="myCanvas" width="450" height="450">
  Your browser does not support the Canvas API, Please upgrade your browser.
</canvas>

<script>
let myCanvas = document.getElementById('myCanvas');
let ctx = myCanvas.getContext('2d');

ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);

ctx.stroke();
</script>

canvas 核心 API 講解

建議大家看官方文檔來系統的學習 canvas API，本文下麵的例子只是對知識點的鞏固。

顏色、樣式和陰影

fillStyle、strokeStyle

fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。

strokeStyle 屬性設置或返回用於筆觸的顏色、漸變或模式。

// 用藍色填充矩形
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

// 漸變填充
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

// 圖像填充
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

 

 

!

 

 

!

shadowBlur、shadowColor

shadowBlur 設置或返回用於陰影的模糊級別

shadowColor 設置或返回用於陰影的顏色

註釋1：請將 shadowColor 屬性與 shadowBlur 屬性一起使用，來創建陰影。

註釋2：請通過使用 shadowOffsetX 和 shadowOffsetY 屬性來調節陰影效果。

ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

 

 

!

createLinearGradient()、createRadialGradient()

context.createLinearGradient(x0,y0,x1,y1) 創建線性漸變

context.createRadialGradient(x0,y0,r0,x1,y1,r1) 創建放射狀/環形的漸變

註釋：addColorStop(stop,color) 方法與 createLinearGradient() 或 createRadialGradient()一起使用。

var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

 

 

!

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

 

 

!

context.createPattern()

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") 重覆繪製元素，元素可以是圖片、視頻，或者其他 <canvas> 元素。

var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

 

 

!

線條樣式

lineCap

context.lineCap="butt|round|square"

設置或返回線條的結束端點樣式 （平直的邊緣(預設)、圓形線帽、正方形線帽）

lineJoin

context.lineJoin="miter|bevel|round"

設置或返回兩條線相交時，所創建的拐角類型 （尖角(預設)、斜角、圓角）

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

 

 

!

lineWidth

ctx.lineWidth = 10

設置或返回當前的線條寬度，單位 px

矩形

rect()、fillRect()、strokeRect()

context.rect(x,y,width,height) 創建矩形

context.fillRect(x,y,width,height) 創建已填色的矩形，預設的填充顏色是黑色。

context.strokeRect(x,y,width,height) 創建不填色的矩形，預設的筆觸顏色是黑色。

// 紅色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

clearRect()

clearRect() 在給定的矩形內清除指定的像素

// 在給定矩形內清空一個矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

 

 

!

路徑

提示：請使用這些方法來創建路徑：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

fill()

填充當前的圖像（路徑）。預設顏色是黑色。

提示：請使用 fillStyle 屬性來填充另一種顏色/漸變。

註釋：如果路徑未關閉，那麼 fill() 方法會從路徑結束點到開始點之間添加一條線，以關閉該路徑，然後填充該路徑。

// 繪製 150*100 像素的矩形，然後用綠色來給它填色：
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();

 

 

!

stroke()

stroke() 方法會繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。預設顏色是黑色。

提示：請使用 strokeStyle 屬性來繪製另一種顏色/漸變。

beginPath()

beginPath() 起始一條路徑，或重置當前路徑

closePath()

closePath() 創建從當前點回到起始點的路徑

moveTo()、lineTo()

moveTo() 把路徑移動到畫布中的指定點，不創建線條

lineTo() 添加一個新點，然後在畫布中創建從該點到最後指定點的線條

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

quadraticCurveTo()、bezierCurveTo()

context.quadraticCurveTo(cpx,cpy,x,y); 創建二次貝塞爾曲線

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 創建三次方貝塞爾曲線

ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
image
image 
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
image
image

arc()、arcTo()

context.arc(x,y,r,sAngle,eAngle[,counterclockwise]); 創建弧/曲線（用於創建圓形或部分圓）

context.arcTo(x1,y1,x2,y2,r); 創建兩切線之間的弧/曲線

ctx.beginPath();
arc(100, 75, 50, 0*Math.PI, 1.5*Math.PI)
ctx.stroke();
image
image 
ctx.beginPath();
ctx.moveTo(20,20);           // 創建開始點
ctx.lineTo(100,20);          // 創建水平線
ctx.arcTo(150,20,150,70,50); // 創建弧
ctx.lineTo(150,120);         // 創建垂直線
ctx.stroke();                // 進行繪製

 

 

!

clip()

clip() 從原始畫布剪切任意形狀和尺寸的區域

// 剪切矩形區域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之後繪製綠色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

 

 

!

isPointInPath()

isPointInPath() 如果指定的點位於當前路徑中，則返回 true，否則返回 false

ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {
  ctx.stroke()
}

轉換

scale()

scale() 縮放當前繪圖至更大或更小

// 繪製矩形，放大到 200%，然後再次繪製矩形：
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

 

 

!

rotate()

rotate() 旋轉當前繪圖

// 將矩形旋轉 20 度：
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50,20,100,50);

 

 

!

translate()

translate() 重新定義畫布上的 (0,0) 位置

ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

 

 

!

transform()、setTransform()

context.transform(a,b,c,d,e,f); 替換繪圖的當前轉換矩陣

context.setTransform(a,b,c,d,e,f); 將當前轉換重置為單位矩陣。然後運行 transform()

文本

font、textAlign、textBaseline

font 設置或返迴文本內容的當前字體屬性

textAlign 設置或返迴文本內容的當前對齊方式

textBaseline 設置或返回在繪製文本時使用的當前文本基線

fillText()、strokeText()、measureText()

context.fillText(text, x, y, maxWidth); 在畫布上繪製被填充的文本

context.strokeText(text,x,y,maxWidth); 在畫布上繪製文本（無填充）

context.measureText(text).width; 返回包含指定文本寬度的對象

ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);

ctx.font="40px Arial";
// 創建漸變
var gradient=ctx.createLinearGradient(0, 0, myCanvas.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用漸變填色
ctx.strokeStyle=gradient;
ctx.strokeText("Hello World", 10, 90);

圖像繪製

drawImage()

context.drawImage(img,x,y,width,height); 向畫布上繪製圖像、畫布或視頻

var img=document.getElementById("tulip");
ctx.drawImage(img, 10, 10);

像素操作

width、height、data

width 返回 ImageData 對象的寬度

height 返回 ImageData 對象的高度

data 返回一個對象，其包含指定的 ImageData 對象的圖像數據

createImageData()、getImageData()、putImageData()

createImageData() 創建新的、空白的 ImageData 對象

getImageData() 返回 ImageData 對象，該對象為畫布上指定的矩形複製像素數據

putImageData() 把圖像數據（從指定的 ImageData 對象）放回畫布上

合成

context.globalAlpha = number; 設置或返回繪圖的當前 alpha 或透明值
context.globalCompositeOperation="source-in"; 設置或返回新圖像如何繪製到已有的圖像上

其他

save()、restore()

save() 保存當前環境的狀態
restore() 返回之前保存過的路徑狀態和屬性

getContext

let cxt = Canvas.getContext('2d')

為不同的繪製類型 （2d、3d） 提供不同的環境，當前唯一支持的是 2d 環境


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 設計模式學習——工廠模式（Factory Pattern）
    1、有一個工廠，專門生產不同品牌的汽車。當有人需要從此工廠提貨的時候，只需要告訴他，要什麼品牌的，就可以了，並不關心這些車是怎麼生產出來的。 2、以上方式，如果增加品牌的時候，也要修改工廠，有點麻煩。於是，把工廠也抽象了。 1的類圖與實現： 首先，是通用的車 然後是不同品牌的車，繼承自Car 接著， ...
  • angularJS學習筆記一
    項目框架轉換 原來用的是jquery+ace.js框架的項目 現在需要改為現在流行的angularJS框架 本人又不會angularJS，只能一步一步的摸索 路漫漫其修遠兮 吾將上下而求索 剛接觸angularJS 給我的第一感覺是總有和最早期的ASP有些相似 很多前端邏輯 很多界面代碼揉合在一起， ...
  • msgTips 頂部彈窗
    最近發現好多網站都採用頂部彈窗，並且不用用戶手動去點擊確定。感覺這樣很方便用戶，所以也找了好多大神的代碼，整理一下方便以後查找 前端： 個人感覺還是很好用的，這個是從某位大神那裡引用來的，如果有冒犯，麻煩告訴我，我會刪除的 下載鏈接：http://pan.baidu.com/s/1hr8vIF6 ...
  • [html]Sublime Text添加插件
    今天想在Sublime Text(簡稱ST)內編寫HTML後直接使用瀏覽器看效果，想添加View in Browser插件，然後遇到奇怪的問題添加插件直接報"找不到有用的插件" 一開始懷疑是中文破解版的，換成原版的就會好。但是官網上下載原版還是不行，然後上網搜了一下，發現好多人遇到此問題。 接著就一 ...
  • [旅行定製網站] 記錄用戶體驗變好的過程
    之前我的旅游網站前端部分只用了HTML+CSS解決，接下來逐步使用更高級的CSS特性和新引入的JavaScript技術來提高網站的交互體驗。 每到進行線上更新的時候，就來記錄一次更新的內容。 ...
  • JavaScript 排序演算法（JavaScript sorting algorithms）
    介紹常見的排序演算法：冒泡排序、選擇排序、插入排序、歸併排序、快速排序及簡單的性能測試。 ...
  • Easyui 官網網址
    http://www.jeasyui.com/download/list.php 下載版本1.5.2的easyui中文API，可在CSDN網站http://download.csdn.net/download/tkk_lcm/9932078下載，不過需要有CSND賬號和1個積分才行。 ...
  • 7種方法實現移動端Retina屏幕1px邊框效果
    在Reina（視網膜）屏幕的手機上，使用CSS設置的1px的邊框實際會比視覺稿粗很多。在之前的項目中，UI告訴我說我們移動項目中的邊框全部都變粗了，UI把他的設計稿跟我的屏幕截圖跟我看，居然真的不一樣。沒有辦法，只有在後面的版本中去修改了，但是要改的話，需要知道是為什麼。所以查了很多資料，終於搞懂了... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類