码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas初探

时间:2015-01-31 00:20:53      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

虽然自己身为后端工程师,但仍然有一颗前端的??,尤其是游戏前端。所以最近在试着学习如何用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

只需要将他写的文件放到要访问的路径下然后node去执行就ok了。

Eesy work?But I feel it‘s cool.

 

Canvas初探

标签:

原文地址:http://www.cnblogs.com/newjunwei/p/4263456.html

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