这几天在做项目的时候,想在游戏画面之前,在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. @1-5使用pandas保存豆瓣短评数据

    使用pandas保存豆瓣短评数据 Python爬虫(入门+进阶)     DC学院 本节课程的内容是介绍open函数和pandas两种保存已爬取的数据的方法,并通过实际例子使用pandas保存数据. ...

  2. Longest Turbulent Subarray LT978

    A subarray A[i], A[i+1], ..., A[j] of A is said to be turbulent if and only if: For i <= k < j ...

  3. phantomjs问题收集

    1. phantomjs如果遇到重定向的url,两个页面都会加载,onInitialized只会执行一次,onResourceReceived会执行两次.我试过在onInitialized加一段代码, ...

  4. java 检查异常 和 非检查异常

    个人见解 ,如果有问题 ,还希望大神们 指正 1. 非检查异常 又称运行时 异常 ,所有 继承自 RuntimeException 的异常都是 非检查异常  ,, 如果你不处理  会有 虚拟机 mai ...

  5. python正则表达式获取两段标记内的字符串

    比如获取绿色字符串 ModelData.PayTableData =[{"}, {"}, {"}]; ModelData.PayTableData1 =[{"} ...

  6. mybatis 复杂传参

    1基本传参数 Public User selectUserWithCon(@param(“userName”)String  name,@param(“userArea”)String area); ...

  7. Android Camera后台拍照

    http://item.congci.com/item/android-camera-houtai-paizhao 有许多人希望在不让用户知道的情况下,使用Android后台Service调用摄像头拍 ...

  8. pycharm显示Unresolved reference

    状态:已解决 原因:不知道怎么表达 解决方法:重装django,,,,,,,,,,,,,,,,,,,

  9. ibatis注意要点

    一.ibatis的关键字like查询 select * from t_student where s_name '%张%'; 这种like语句在ibatis中怎么写,他们现在的项目是用ibatis作为 ...

  10. s5-10 路由

    路由器转发分组的依据 路由表 路由表从何而来 直连路由.静态路由.动态路由 路由器收到一个分组之后-  打开分组L3,提取出目的IP地址  确定目标网络,查找路由表 按位"AND&quo ...