Canvas初探
虽然自己身为后端工程师,但仍然有一颗前端的❤️,尤其是游戏前端。所以最近在试着学习如何用js编写html5游戏,并看了一个简单的‘俄罗斯方块’的js游戏源码,结论有以下几点。
1、图像效果实现可以基于canvas 和 css 两种,估计多数的js游戏开发引擎也是这样的。
2、Js写些简单好玩的游戏所需要的环境很简单:浏览器,Js文件编辑器,一个发布html静态网页的WebServer。
这里简单说下学习Canvas的一些东东,网上看找了个教程网站:http://javascript.ruanyifeng.com/。网站有Js、html、Canvas的教程,基本包含了我所需要的。
写了两个文件canvas.html和canvas.js练习了一下Canvas教程里面的源码,画直线、矩形、扇形等东东,然后又练习导入图片,然后又练习通过处理图片数据显示灰度图片,这时出问题了。。。
The canvas has been tainted by cross-origin data。
网上搜是因为资源'域'的问题(我之前是直接打开html文件进行测试的):
翻译如下:为了阻止欺骗,浏览器会追踪 image data。当你把一个“跟canvas的域不同的”图片放到canvas上,这个canvas就成为 “tainted”(被污染的,脏的),浏览器就不让你操作该canvas 的任何像素。这对于阻止多种类型的XSS/CSRF攻击(两种典型的跨站攻击)是非常有用的。
看来得用个webserver来统一一下域,webserver可以选择tomcat、jetty、nginx
想了想,大家都说nodejs很强,搜一下,Node官网简介:Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.官网还主页还提供了一个简单的tcpServer的实现例子,感觉这个玩意可以支持用来作为webserver。
网上搜到一个用nodejs写的一个Node.JS static file web server,地址https://gist.github.com/rpflorence/701407
只需要将他写的static_server.js文件放到要访问的路径下然后node去执行就ok了。
Eesy work?But I feel it's cool.