这几天在做项目的时候,想在游戏画面之前,在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. PHP5.3的编译扩展

    ./configure --prefix=/usr/local/php --enable-fastcgi --enable-zip --enable-fpm --enable-gd-native-tt ...

  2. sqlserver 添加服务器链接 跨服务器访问数据库

    转载地址1:https://www.cnblogs.com/wanshutao/p/4137994.html //创建服务器链接 转载地址2:https://www.cnblogs.com/xulel ...

  3. Peter的烟(水题测试2017082401&洛谷1150)

    题目链接:Peter的烟 这道题基本做法很水,不解释. #include<bits/stdc++.h> using namespace std; int main(){ int n,k; ...

  4. Python之tornado

    一.快速了解Tornado框架 1)tornado简介 Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的框架)有着明显的区别:它是非阻塞式服务器,而且速度相当快.得利于其 ...

  5. git版本控制工具的使用(1)。

    为了使用. 感谢:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 讲解的很清晰, ...

  6. Tkinter添加图片

    Tkinter添加图片的方式,与Java相似都是利用label标签来完成的: 一.默认的是gif的格式,注意将png后缀名修改为gif还是无法使用,文件格式依然错误. photo = PhotoIma ...

  7. 【转】PHP实现验证码

    转自http://www.jb51.net/article/40341.htm 新建一个captcha.php: //验证码类class Captcha { private $charset = 'a ...

  8. 2018.11.07 bzoj2751: [HAOI2012]容易题(easy)(组合数学)

    传送门 组合数学一眼题. 感觉一直做这种题智商会降低. 利用组合数学的分步计数原理. 只用关心每个数不被限制的取值的总和然后乘起来就可以了. 对于大部分数都不会被限制,总和都是n(n+1)2\frac ...

  9. Linux下移植QT(2)---移植QT

    准备:ubantu12.04   内核 3.0.8(最好用同样的内核,3.2.0时没成功) 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc-4.4.6 QT版本5.4.2 ...

  10. 关于preg_match() / preg_replace()函数的一点小说明

    int preg_match ( string $pattern , string $subject [, array &$matches [, int $flags = 0 [, int $ ...