canvas教程

网页版的processing

字号+ 作者:H5之家 来源:H5之家 2017-08-21 18:00 我要评论( )

网页版的processing,//一种是嵌入java applet(还没学会),一种是用processing.js私心想着,还是第二种更实用,就没去理会第一种。希望博客园能运行这个例子吧

正文

//

一种是嵌入java applet(还没学会),一种是用processing.js

私心想着,还是第二种更实用,就没去理会第一种。

希望博客园能运行这个例子吧,学校开放个端口太麻烦了,正好可以钻这个空子,嘿嘿。

尼玛啊,终于成功啦。

具体的步骤可以参考

我用的是最最下面的方法,因为要在cnblog里面实现嘛。

即直接在你的页面中添加processing源码这一种方法。

不过也是经过了很大的波折才成功,原因是,

1.刚开始cnblog不让添加canvas标签,

2.引用web上的脚本的话,必须是:

3.如果插入的代码中有<script>这种东西,就会在脚本中自动在脚本两端添加“// <![CDATA[” 和 “// ]]>”这种东西,这会影响到从processing源码到中间js代码的“编译”(参考官网)

////我这里采用的是最笨的办法,就是使用documen.write()把不让加的东西都用脚本加上。这样当然不是什么好的办法。更好的办法会在以后尝试。

好吧,不能采用write()方法,不然你的主页就打不开了。用jquery的apend方法和html方法吧,试了好久,真无语。

这个例子所有的代码是

<p>&nbsp;</p>
<script type="text/javascript" src="https://rawgit.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
$("#help").html("<canvas> </canvas>");
$("body").append("<script type=\"application/processing\" data-processing-target=\"pjs\">\
float radius = 50.0;\
int X, Y;\
int nX, nY;\
int delay = 16; void setup(){\
size( 200, 200 );\
strokeWeight( 10 );\
frameRate( 15 );\
X = width / 2;\
Y = height / 2;\
nX = X;\
nY = Y;} void draw(){\
radius = radius + sin( frameCount / 4 );\
X+=(nX-X)/delay;\
Y+=(nY-Y)/delay;\
background( 100 );\
fill( 0, 121, 184 );stroke(255);ellipse( X, Y, radius, radius );} void mouseMoved(){\
nX = mouseX;\
nY = mouseY;}<"+"/script>");});
// ]]></script>

就能看到那个眼睛了,9点了,回去睡觉了。

//

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 网页设计中优化图片的6大技巧

    网页设计中优化图片的6大技巧

    2017-07-28 08:04

  • 瞬间成为网页设计师必知的六大技巧

    瞬间成为网页设计师必知的六大技巧

    2017-07-16 14:00

  • processingjs学习系列之一 processingjs,通过该框架可以直接将p

    processingjs学习系列之一 processingjs,通过该框架可以直接将p

    2017-07-16 09:01

  • 广州UI设计:教你一些网页设计的排版技巧

    广州UI设计:教你一些网页设计的排版技巧

    2017-06-27 17:04

网友点评
r