这几天在做项目的时候,想在游戏画面之前,在Canvas上面画上一张背景图,代码如下
    let ctx = canvas.getContext('2d')

   export default class Main {
     constructor() {
         this.startpic()
    }
 
     startpic(){
           var img = new Image(100, 100)
          img.src = BG_IMG_SRC
          ctx.drawImage(this.img, 10, 10);
     }
   }

这张图片却怎么也显示不出来。

后来发现:

找资料说要添加image的onload方法:
    var img = new Image(100, 100)
    img.src = BG_IMG_SRC
    img.onload = this.drawImageActualSize();
    ctx.drawImage(this.img, 10, 10);
    显示出来了,效果如下:

发现微信小游戏的帖子非常少,发一片活跃一下

												

微信小游戏canvas操作的更多相关文章

  1. 微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  2. 微信小游戏开发Canvas资源汇总

    Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...

  3. 使用Laya引擎开发微信小游戏(上)

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

  4. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  5. 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

  6. 微信小游戏 demo 飞机大战 代码分析 (一)(game.js, main.js)

    微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

  7. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  8. 微信小游戏开发之四:使用three.js引擎

    一.前言 微信小游戏中最魔性的'跳一跳'就是基于three.js 引擎开发的 源码放到github上了:GitHub地址   请自行下载. 二.下载 three.min.js 打开页面,复制代码到本地 ...

  9. 微信小游戏爆款秘笈 数据库MongoDB攻略篇

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 随着微信小游戏的爆发,越来越多开发者关注到MongoDB与小游戏业务的契合度. ...

随机推荐

  1. android 使用UDP发送数据 DatagramSocket 创建对象为null

    DatagramSocket socket=null; try { socket = new DatagramSocket();  //这里创建对象为空 } catch (SocketExceptio ...

  2. 阿里云help

    docker 技术的安全性问题,如果一个集群多个用户不希望互相可以看到对方的docker镜像和容器,怎么办? .... http://mirrors.aliyun.com/help/centos yu ...

  3. object SparkStreaming_StateFul {

    窗口查询 ) )).reduceByKeyAndWindow(_+_,_-_,Seconds(10),Seconds(15))     每隔15s进行查询,查询为前10s的结果.这里的值必须为采集时间 ...

  4. 【转】Linq表达式、Lambda表达式你更喜欢哪个?

    [转]Linq表达式.Lambda表达式你更喜欢哪个? 什么是Linq表达式?什么是Lambda表达式? 如图: 由此可见Linq表达式和Lambda表达式并没有什么可比性. 那与Lambda表达式相 ...

  5. 【搜索】 Prime Path

    #include<cstdio> #include<cstring> #include<cmath> #include<queue> #include& ...

  6. JavaScript中hasOwnProperty函数

      JavaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性. 使用方法: object.hasOwnProperty(proName) 其中参数 ...

  7. 旅行家的预算(NOIP1999&水题测试2017082301)

    题目链接:旅行家的预算 这题还可以,不算太水. 这题贪心即可. 我们采取如下动作: 如果在装满油的情况下能到达的范围内,没有加油站,则无解. 如果在装满油的情况下能到达的范围内,油价最低的加油站的油价 ...

  8. h5常用标签语义

    <article>定义页面独立的内容区域.例如外部来的文章. <aside>定义页面的侧边栏内容.<aside> 标签定义 <article> 标签外的 ...

  9. Codeforces 1060E(思维+贡献法)

    https://codeforces.com/contest/1060/problem/E 题意 给一颗树,在原始的图中假如两个点连向同一个点,这两个点之间就可以连一条边,定义两点之间的长度为两点之间 ...

  10. mongodb知识积累

    1: 安装mongodb https://www.cnblogs.com/zhangdaicong/p/7492494.html 2:配置文件 vi /etc/mongodb.conf https:/ ...