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.

 

转载于:https://www.cnblogs.com/newjunwei/p/4263456.html