CreateJs系列教程之 EaselJs_4_绘制图片(Bitmap)
2017-06-28 15:29
211 查看
核心JS代码:
var cjs = createjs, canvas, stage, container, w = window.innerWidth, h = window.innerHeight, image; function init() { //设置canvas属性 canvas = document.getElementById('game'); canvas.width = w; canvas.height = h; //创建舞台 stage = new cjs.Stage(canvas); container = new cjs.Container();//绘制外部容器 stage.addChild(container); //加载图片 image = new Image(); image.src = "imgs/1.png"; image.onload = handleImageLoad; } function handleImageLoad(event) { var bitmap = new cjs.Bitmap(event.target);//cjs.Bitmap("imgs/1.png") PS: 必须图片加载完成之后 img.onload之后执行 bitmap.x = w - bitmap.getBounds().width >>1; bitmap.y = h - bitmap.getBounds().height >>1; bitmap.on('click', function () { alert(); }); //加入场景 container.addChild(bitmap); stage.update(); }
说明讲解:
1:创建加载图片//加载图片 image = new Image(); image.src = "imgs/1.png"; image.onload = handleImageLoad;
2:实例化一个图
var bitmap = new cjs.Bitmap(event.target);//cjs.Bitmap("imgs/1.png") PS: 必须图片加载完成之后 img.onload之后执行
PS:Bitmap(imgobj|imgurl) 当是 imgurl时,必须在img.onload之后执行;
相关文章推荐
- CreateJs系列教程之 EaselJs_4_绘制图片(Bitmap)
- CreateJs系列教程之 EaselJs_2_绘制文字(Text)
- CreateJs系列教程之 EaselJs_6_绘制动画走秀(spriteSheet)
- CreateJs系列教程之 EaselJs&Tween_5_绘制点击提示(Shape,Tween)
- CreateJs系列教程之 EaselJs_3_绘制移动矩形(Shape)
- CreateJs系列教程之 EaselJs_6_绘制动画走秀(spriteSheet)
- createjs 入门之EaselJs 绘制图片Bitmap
- 入门createjs———easelJS教程(1)绘制一个圆形
- HTML5/CSS3系列教程:使用SVG图片
- [Android]Android高级UI开发系列教程(二) - Android绘制教程
- Excel绘制标准曲线全图片教程
- 【D3.js数据可视化系列教程】(三十三)-- 力导向图之图片和提示
- HTML5/CSS3系列教程:使用SVG图片
- 【D3.js数据可视化系列教程】--(八)使用D3绘制SVG
- Android[高级教程] Android程序调用本地图片并进行绘制
- 【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
- 图片、浏览器-HTML5/CSS3系列教程:使用SVG图片-by小雨
- HTML5/CSS3系列教程:使用SVG图片
- CSS3系列教程:背景图片(背景大小和多背景图) 应用说明