html5裡面最讓人心動的技術,對我來說,canvas絕對是首選,它沒出現之前,一切網頁相關的遊戲動畫非flash莫屬.
當canvas來臨時,是時候用用新鮮的血液了.
canvas的本質就是提供了一套前端可用的gui介面,包括畫線,畫方,畫圓,畫字等常用的gui功能,先來看看在瀏覽器端的引用
id=
"canvas"
width=
500heigth=
400>
canvas有元素大小與繪圖大小之分,預設的繪圖大小是300*150,假如不直接新增width,height時,啟用預設值,假如在css樣式表裡設定width,height時,會造成意想不到的效果,因為canvas繪圖承認的大小是它的繪圖大小,跟元素本身大小關係不大,所以建議直接在html的元素標籤上直接寫上寬高,css樣式表裡不要設定寬高.
然後所有的繪圖操作其實都是在canvas的繪圖上下文中進行的,方法是呼叫canvas例項的getcontext方法
var
canvas
=document
.queryselector
('#canvas'
);var
context
=canvas
.getcontext
('2d'
);
context上面進行
今天的任務是實現乙個精靈的滑鼠定位功能,效果圖如下:
先說下這裡要用到的幾個功能點
先來說說繪製背景網格線網格線是橫豎兩方向鋪滿的,原理就是不斷的在兩方向上畫線,保證線之前的間距,直到畫滿為止,先上乙個畫一條線的例子
// 設定描邊的樣式
context
.strokestyle
="#ccc"
;// 設定繪製線的寬度
context
.linewidth
=0.5
;// 開始進入畫線狀態
context
.beginpath
();// 移到起始點
context
.moveto(50
,50);// 連到終點
context
.lineto
(100
,100
);// 開始描邊
context
.stroke
();
// 畫背景線
function
drawbackground
()while(j
>=
space
)}
然後我們來繪製精靈
// 畫精靈圖
function
drawimg
()var
img=
newimage
();img
.src
='img/running-sprite-sheet.png'
;img
.onload
=function
();
然後實時的根據滑鼠位置來畫參考線關於座標,這裡要說下,預設事件引數裡的座標是相對於文件的,所以在
canvas裡畫座標的話,需要轉換一下,這裡給出轉換的**
// 切換網頁座標為canvas座標
function
windowtocanvas(x
,y)}
// 畫垂直線
function
drawvertical(x
)// 畫水平線
function
drawhorizontal(y
)// 畫定位網格
function
drawguidelines(x,y)
最後我們來定義我們的事件這裡定義
canvas的mousemove事件,然後利用事件引數裡的座標資訊實時的呼叫上面的繪製方法
canvas
.onmousemove
=function(e
)
canvas的繪圖流程大概都分下面幾步
canvas是乙個比較好玩的技術,只要你有想像力,就可以畫出任何東西出來,這個系列將會全面的講解它的用法,盡請期待.
Django系列學習之五
後台管理頁面做好了，接下來就要做公共訪問的頁面了。當我們剛剛在瀏覽器中輸入 之後，瀏覽器顯示出了後台管理的登入頁面，那有沒有同學想過這個伺服器是怎麼給我們找到這個頁面並返回呢？admin 是我們想要請求得頁面，伺服器在收到這個請求之後，就一定對應著乙個處理動作，這個處理動作就是幫我的產生頁面內容並返...
WPF 系列學習之 ListBox
最近的工作不是很忙就來學習一點東西,看到網上很多的朋友在研究wpf,我也來給自己衝衝電,把自己的文章寫下來,希望能對初學的朋友有0.1 的幫助,那麼我就沒有白寫了,我的表達能力有限 就不多說過多的文字,我一般喜歡簡單一的,但能說明白 清楚就ok 一 listbox 控制項的介紹 二 執行結果瀏覽 程...
Spring系列學習之Spring Batch
英文原文 目錄概述 特性spring boot配置 快速開始 學習 文件 指南 示例輕量級，全面的批處理框架，旨在開發對企業系統日常運營至關重要的強大批處理應用程式。spring batch提供了可重複使用的功能，這些功能對於處理大量記錄至關重要，包括記錄 跟蹤，事務管理，作業處理統計，作業重啟，跳...