码迷,mamicode.com
首页 > Web开发 > 详细

CreateJS第0章- Canvas基础

时间:2015-04-18 17:41:46      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:

最近网页游戏比较火,以前做过一些小游戏,但是过段时间就都忘了,今天在这里记录一下学习过程,以备后用。
做网页游戏有很多种框架,我是flash程序用Adobe出品的CreateJS最容易。基本上继承了flash的大概框架像stage,MovieClip,显示列表等等。
CreateJS是什么?
CreateJS 中包含五款工具:
EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控),同时提供 Flash 中的“显示列表”功能。
TweenJS:一个简单的用于制作类似 Flash 中“补间动画”的引擎,可生成数字或非数字的连续变化效果。
SoundJS:一个音频播放引擎,能够根据浏览器性能选择音频播放方式。将音频文件作为模块,可随时加载和卸载。
PrloadJS:帮助你简化网站资源预加载工作,无论加载内容是图形、视频、声音、JS、数据……
官网地址:

CreateJS怎么来的?
从2008年以来HTML5标准就一直修订,修订,修订。当时的目的就是为了加强网页的表现能力。一经推出就一发不可收拾的改到现在。其中最具魅力的就是Canvas标签,这个标签让网页制作复杂的矢量图能为可能。随着移动端智能手机,各种pad的流行Canvas的前程一片光明。虽然Canvas标准出来了,但是毕竟是制定框架只定义了基本的接口,用官方的API做动画和游戏费时费力,不是一般人能够接受的。随后各种基于Canvas的框架如雨后春笋般的出现了。今天的主角CreateJS也就应景而生。CreateJS应用最多的地方应该是Flash转换Canvas,从以前的Toolkit 工具箱到现在的cs CC直接集成转换工具。下面讲讲HTML5的核心之一Canvas。

Canvas能干什么
Canvas 直译为 画布 当然就做动画,作画板用的。理论上说flash能干什么Canvas就能干什么。但是作为一个新的标准,缺点也是很明显的。
首先兼容性问题:IE9以下都不支持,光这一点Canvas想要流行起来至少的5年或者更长时间(IE6是2001年10月面世,至今已经10多年了依然僵而不死)。
其次更严重的兼容问题:硬件加速WebGL虽然出来时间不短了,但是也只有最新的浏览器才能支持。致命的是IE现在所有版本都不支持(好消息是前两天微软宣布加入WebGL标准)。
说完缺点再说说优点
Canvas代表了网页的未来!够唬人吧,的确如此。虽然现在有很多问题,性能也相当于flash的10年前的水平,毕竟是不用插件就可以全平台运行,而且越来越多的技术会向这里靠拢。靠着互联网这面大旗,前面的路会越来越宽。我个人认为现阶段完美的动画解决方案是PC端Flash+移动端Canvas。

Canvas怎么用
以上都是废话,上代码。
最最最基础初始化

<!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>

 

CreateJS第0章- Canvas基础

标签:

原文地址:http://www.cnblogs.com/kt520/p/4437627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!