CreateJs系列教程之 EaselJs_4_绘制图片(Bitmap)

核心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之后执行;

演示效果:

时间: 2024-10-08 10:29:17

CreateJs系列教程之 EaselJs_4_绘制图片(Bitmap)的相关文章

CreateJs系列教程之 EaselJs_1_绘制文字(Text)

核心Js代码: var canvas,     stage,     w = window.innerWidth,     h = window.innerHeight; function init() {     //设置canvas属性     canvas = document.getElementById('game');     canvas.width = w;     canvas.height = h;     //创建舞台     stage = new createjs.St

CreateJs系列教程之 EaselJs_6_绘制动画走秀(spriteSheet)

核心JS代码: var cjs = createjs,     canvas,     stage,     container,     w = window.innerWidth,     h = window.innerHeight; function init() {     //设置canvas属性     canvas = document.getElementById('game');     canvas.width = w;     canvas.height = h;    

iOS系列教程之TextKit实现图文混排读后记

iOS系列教程之TextKit实现图文混排读后记 前两天看搜狐家明哥写的<TextKit实现图文混排> 今晚回家看了下API发现了一个更加取巧的实现方式.可以直接将后台返回的html富文本用textView显示出来. 记得两年前当时做这个的时候还是借助了笨重的webview. > Textkit是iOS7新推出的类库,其实是在之前推出的CoreText上的封装,有了这个TextKit,以后不用再拿着CoreText来做累活了, 下面是我分别用UITextView 和UIWebView 显

kali linux 系列教程之metasploit 连接postgresql可能遇见的问题

kali linux 系列教程之metasploit 连接postgresql可能遇见的问题 文/玄魂   目录 kali linux 下metasploit 连接postgresql可能遇见的问题................................ 1 前言............................................................................................................... 1

集群系列教程之:keepalived+lvs 部署

集群系列教程之:keepalived+lvs 前言:最近看群里很多人在问keepalived+lvs的架构怎么弄,出了各种各样的问题,为此特别放下了别的文档,先写一篇keepalived+lvs架构的文档,使那些有需求的人能够得以满足.但是此篇文档是架构文档,不是基础理论,但我想你能做这个架构,势必也了解了基础理论知识,更多的理论知识体系,请看下回分解.... 测试拓扑: 环境说明: 从上面的拓扑图,就可以看出本实验的环境信息,其中实线代表的是真实的物理连接,而虚线表示的是逻辑关系.hostna

WCF系列教程之WCF服务宿主

本文参考自http://www.cnblogs.com/wangweimutou/p/4377062.html,纯属读书笔记,加深记忆. 一.简介 任何一个程序的运行都需要依赖一个确定的进程中,WCF也不例外.如果我们需要使用WCF服务,那么我们就必须将服务寄宿与创建它并控制它的上下文和生存期的运行时环境当中,承载服务的环境,称之为宿主.WCF服务可以在支持托管代码的任意Windows进程中运行.WCF提供了统一编程模型,用于生成面向服务的应用程序.此编程模型保持一致且独立于部署服务的运行时环境

Android系列教程之Activity的生命周期

通过上一节"Android系列教程之Android项目的目录结构"我们已经知道了什么是Activity,那么为什么我们创建一个Activity的导出类的时候为什么都要覆盖Activity的onCreate方法呢,为什么会在onPause()方法中保存一些当前Activity中的变化,要弄明白这些就要先了解Activity的生命周期,也就是一个Activity才开始到结束都要经过那些状态,下面通过一个例子了解Activity的声明周期. 一:Activity的生命周期方法 Android

kali Linux系列教程之BeFF安装与集成Metasploit

kali Linux系列教程之BeFF安装与集成Metasploit 文/玄魂 1.1 apt-get安装方式 1.2 启动 1.3 基本测试 1.4 异常信息 1.5 从源码安装BeEF 1.5.1 安装curl git 1.5.2 安装rvm 1.5.3 安装依赖项 1.5.4 安装ruby 1.5.5 安装bundler 1.5.6下载beef 1.5.7 安装和启动 1.6 集成metasploit 1.1 apt-get安装方式 打开终端,输入如下命令: apt-get install

Kali Linux系列教程之OpenVas安装

Kali Linux系列教程之OpenVas安装 文 /玄魂 目录 Kali Linux系列教程之OpenVas安装... 1 前言... 1 1.  服务器层组件... 1 2.客户层组件... 1 安装过程... 2 Initial setup. 2 初始管理员密码... 4 从浏览器访问后台... 4 更新数据... 7 管理用户... 8 扫描器配置信息查看... 9 修复安装错误... 9 创建证书... 10 更新NVT. 12 客户端证书错误... 13 前言 OpenVAS是一款