最近网页游戏比较火，以前做过一些小游戏，但是过段时间就都忘了，今天在这里记录一下学习过程，以备后用。
做网页游戏有很多种框架，我是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基础的更多相关文章

  1. CreateJS第1章 EaselJS基础 （画图）

    这章学学EaselJS的基本常用API首先下载createjs库,在项目文件里新建一个js文件夹放里面http://code.createjs.com/ 各种形状 var sp = new creat ...

  2. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  3. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  4. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  5. 《利用python进行数据分析》读书笔记--第四章 numpy基础：数组和矢量计算

    http://www.cnblogs.com/batteryhp/p/5000104.html 第四章 Numpy基础:数组和矢量计算 第一部分:numpy的ndarray:一种多维数组对象 实话说, ...

  6. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  7. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  8. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  9. 【windows核心编程】 第六章 线程基础

    Windows核心编程 第六章 线程基础 欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3145214.html 1. 线程的组成 ①    一个是线程的内核 ...

随机推荐

  1. Magic of David Copperfield II（奇偶性）

    题目大意:这是一个魔术游戏,首先把你的手指放在一个左上角的格子里面,然后魔术师说你可以移动K1步,移动完之后,他会删除一些方格,并且说,你肯定不在这里,删除的方格不可以再去了,然后让你再走K2步,继续 ...

  2. The Doors - POJ 1556 (线段相交)

    题目大意:有一个房间(左上角(0,10),右下角(10,0)),然后房间里有N面墙,每面墙上都有两个门,求出来从初始点(0,5),到达终点(10,5)的最短距离.   分析:很明显根据两点之间直线最短 ...

  3. 层层递进Struts1（八）之总结

    先来看一下Struts1学习总结的思维导图,画的主要是Struts1中的重点和博客分布,如下所示: 系列博客的侧重点是: Struts1是什么? 为什么要使用它? 如何使用Struts1? Strut ...

  4. 405. Convert a Number to Hexadecimal

    ..感觉做的很蠢. 主要就是看负数怎么处理. 举个例子,比如8位: 0111 1111 = 127 1111 1111 = -1 1000 0000 = -128 正常情况1111 1111应该是25 ...

  5. ADO.NET对象模型

    ADO.NET建立在NetFramwork一些核心类的基础之上,可以将这些类分为两组:用于包含于管理数据的容器类与用于连接特定数据源的控制类. 容器类是通用的,无论使用什么样的数据源,都可以使用相同的 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（34）-文章发布系统①-简要分析

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET ...

  7. 解决IE6,IE7不能隐藏绝对定位溢出的内容

    令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效. 情况一:(在parent上增加position:relative) <s ...

  8. Android开发：最详细的 NavigationDrawer 开发实践总结

    最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后(有问题欢迎反馈哦): Android开发:Translucent System Bar 的最佳实践 Android开发 ...

  9. 删除右键菜单的“用阿里旺旺发送此文件”项

    在运行对话框里的输入框内输入Regedit.exe,点击确定按钮就启动了注册表编辑器程序. 在注册表编辑器窗口左侧展开HKEY_CLASSES_ROOT\CLSID{0DE1378D-F811-40E ...

  10. Java基础知识强化06：使用BigDecimal计算阶乘1+1/2！+1/3！+……

    package himi.hebao04; import java.math.BigDecimal; public class TestDemo07 { public static void main ...