CreateJS第0章- Canvas基礎

時間 2019-11-20

標籤 createjs canvas 基礎简体版

原文原文鏈接

最近網頁遊戲比較火，之前作過一些小遊戲，可是過段時間就都忘了，今天在這裏記錄一下學習過程，以備後用。
作網頁遊戲有不少種框架，我是flash程序用Adobe出品的CreateJS最容易。基本上繼承了flash的大概框架像stage，MovieClip，顯示列表等等。
CreateJS是什麼？
CreateJS 中包含五款工具：
EaselJS：用於 Sprites、動畫、向量和位圖的繪製，建立 HTML5 Canvas 上的交互體驗（包含多點觸控），同時提供 Flash 中的「顯示列表」功能。
TweenJS：一個簡單的用於製做相似 Flash 中「補間動畫」的引擎，可生成數字或非數字的連續變化效果。
SoundJS：一個音頻播放引擎，可以根據瀏覽器性能選擇音頻播放方式。將音頻文件做爲模塊，可隨時加載和卸載。
PrloadJS：幫助你簡化網站資源預加載工做，不管加載內容是圖形、視頻、聲音、JS、數據……
官網地址：html

CreateJS怎麼來的？
從2008年以來HTML5標準就一直修訂，修訂，修訂。當時的目的就是爲了增強網頁的表現能力。一經推出就一發不可收拾的改到如今。其中最具魅力的就是Canvas標籤，這個標籤讓網頁製做複雜的矢量圖能爲可能。隨着移動端智能手機，各類pad的流行Canvas的前程一片光明。雖然Canvas標準出來了，可是畢竟是制定框架只定義了基本的接口，用官方的API作動畫和遊戲費時費力，不是通常人可以接受的。隨後各類基於Canvas的框架如雨後春筍般的出現了。今天的主角CreateJS也就應景而生。CreateJS應用最多的地方應該是Flash轉換Canvas，從之前的Toolkit 工具箱到如今的cs CC直接集成轉換工具。下面講講HTML5的核心之一Canvas。canvas

Canvas能幹什麼
Canvas 直譯爲畫布固然就作動畫，做畫板用的。理論上說flash能幹什麼Canvas就能幹什麼。可是做爲一個新的標準，缺點也是很明顯的。
首先兼容性問題：IE9如下都不支持，光這一點Canvas想要流行起來至少的5年或者更長時間（IE6是2001年10月面世，至今已經10多年了依然僵而不死）。
其次更嚴重的兼容問題：硬件加速WebGL雖然出來時間不短了，可是也只有最新的瀏覽器才能支持。致命的是IE如今全部版本都不支持（好消息是前兩天微軟宣佈加入WebGL標準）。
說完缺點再說說優勢
Canvas表明了網頁的將來！夠唬人吧，的確如此。雖然如今有不少問題，性能也至關於flash的10年前的水平，畢竟是不用插件就能夠全平臺運行，並且愈來愈多的技術會向這裏靠攏。靠着互聯網這面大旗，前面的路會愈來愈寬。我我的認爲現階段完美的動畫解決方案是PC端Flash+移動端Canvas。瀏覽器

Canvas怎麼用
以上都是廢話，上代碼。
最最最基礎初始化app

<!DOCTYPE >
<html >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{M}</title>
<style>
body,canvas{margin:0;padding:0;}
</style>
</head>
<body >
<script>
 
var canvas
var context
//初始化
function init(){
    canvas = document.createElement("canvas");//建立畫布
    context = canvas.getContext("2d");//獲取畫布的內容，這裏的getContext如今只有一個參數2d，沒準未來會有3d。
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    document.body.appendChild(canvas);
 
    lines(context);
    settext(context,"美女,你愛吃榴蓮麼？");
    drowArc(context);
}
//劃線
function lines(ct){
    ct.moveTo(100,100);//要劃線的起點
    ct.lineTo(400,400);//線的終點
    ct.lineWidth =10;//線條的粗細
    ct.strokeStyle="#cd2828";//線條顏色
    ct.stroke();//寫入到畫布，每條線段的結束必須渲染一下。
    ct.beginPath();//從新開始一個線段，若是沒有這個就會和上一個線段鏈接上
    ct.moveTo(100,400);
    ct.lineTo(400,100);
    ct.stroke();//重點，寫入到畫布
}
//文本
/*
fillText(文本,x,y)
*/
function settext(ct,txt){
    ct.fillStyle = "black";//設置字體
    ct.fillText (txt,200,400)//
 
}
//畫圓
/*
arc的參數 
 
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
context.arc(x,y,半徑,起始角度,結束角度,是否順時針);
*/
function drowArc(ct){
    ct.beginPath();
    ct.arc(250,150,50,1.75*Math.PI,3.15*Math.PI);
    //ct.closePath();//閉合路徑
    ct.stroke();
}
init()
</script>
 
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。