CreateJS第0章- Canvas基础

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

转载于:https://www.cnblogs.com/kt520/articles/CreateJS.html

CreateJS第0章- Canvas基础相关推荐

《FORTRAN语法：章节篇》第0章 Fortran基础知识
第0章 Fortran基础知识 Fortran命名规范Fortran命名规范Fortran命名规范 (1)变量名.过程名小写. (2)保留字名.库函数名.常量名大写. (3)多个单词之间用下划线分隔. ...
Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
JavaSE入门0基础笔记第二章Java基础语法
JavaSE入门0基础笔记第二章Java基础语法 1.运算符 1.1算术运算符 1.1.1运算符和表达式 1.1.2 算术运算符 1.1.3字符的"+"操作 1.1.4 字符串中 ...
鸟哥的Linux私房菜基础学习篇第0章与第1章的重点探索
鸟哥的Linux私房菜基础学习篇第0章与第1章的重点探索目录鸟哥的Linux私房菜基础学习篇第0章与第1章的重点探索前言一.计算机概论 1.知识基础 2.知识初阶 3.知识进阶二.Lin ...
鸟哥-Linux私房菜-基础学习篇-习题解答-第0章
写在前面现如今,接触人工智能行业,或者相关行业的非计算机专业人员,都有对Linux系统的学习有一定的需求.关于Linux系统的学习网上有很多的教程,大部分的教程都是直接使用shell来敲命令行,好其 ...
《JavaScript高效图形编程（修订版）》——第2章 DHTML基础 2.1创建DHTML sprite
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第2章,第2.1节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
PixiJs学前篇（三）：Canvas基础【下篇】
前言在上一篇文章 PixiJs学前篇(二):Canvas基础[中篇] 中我们了解了Canvas的基本绘制形状,接下来我们看一下如何在 Canvas 中绘制文本. 绘制文本文本的绘制也是 Canva ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...

CreateJS第0章- Canvas基础

CreateJS第0章- Canvas基础相关推荐

最新文章

热门文章