canvas教程

HTML学习总结(四)【canvas绘图、WebGL、SVG】

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

一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。canvas 标记和 SVG以及 VML 之间的

<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> </head> <body> <canvas></canvas> <script type="text/javascript" src="cocos2d-js-v3.12-lite.js" charset="UTF-8"></script> <script type="text/javascript"> window.onload = function(){ cc.game.onStart = function(){ //load resources cc.LoaderScene.preload(["HelloWorld.png"], function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); var label = cc.LabelTTF.create("Hello World", "Arial", 40); label.setPosition(size.width / 2, size.height / 2); this.addChild(label, 1); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); }; </script> </body> </html>

 

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

相关文章
  • HTML5 Canvas 画钟表

    HTML5 Canvas 画钟表

    2017-09-12 17:02

  • canvas 绘制二次贝塞尔曲线

    canvas 绘制二次贝塞尔曲线

    2017-09-09 18:00

  • JavaScript入门之Canvas(一): 2D Context

    JavaScript入门之Canvas(一): 2D Context

    2017-08-28 18:00

  • 移动端 canvas插入多张图片生成一张可保存到手机图片

    移动端 canvas插入多张图片生成一张可保存到手机图片

    2017-08-26 11:04

网友点评