这几天在做项目的时候,想在游戏画面之前,在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. swift 官方获取JSON 数据方法

    var url = NSURL(string: "http://www.weather.com.cn/data/sk/101120501.html") var data = NSD ...

  2. SparkStreaming--reduceByKeyAndWindow

    1.reduceByKeyAndWindow(_+_,Seconds(3), Seconds(2))     可以看到我们定义的window窗口大小Seconds(3s) ,是指每2s滑动时,需要统计 ...

  3. C语言实现用位移运算符进行加减乘…

      最近,在百度知道上回答问题,然后看见有的人问如何用位移运算符去进行加减乘除运算,于是巩固今天就在这总结一下.   先讲讲总体思路: 加法运算:将一个整数用二进制表示,其加法运算就是:相异(^)时, ...

  4. rails 新建user的phonenumber字段

    1.新建字段 //rails g migration add_字段名_to_表名 字段名:字段类型 rails g migration add_title_to_contents title:stri ...

  5. 网络编程之IO模型

    IO模型的分类 blocking IO:阻塞IO nonblocking IO:非阻塞IO IO multiplexing:IO多路复用 signal driven IO:异步IO 通常情况下IO默认 ...

  6. php代码中pre的作用??

  7. 2018.12.15 poj3415 Common Substrings(后缀自动机)

    传送门 后缀自动机基础题. 给两个字符串,让你求长度不小于kkk的公共子串的数量. 这题可以用后缀自动机解决废话 考虑对其中一个字串建出后缀自动机,然后用另一个在上面跑,注意到如果一个状态有贡献的话, ...

  8. hdu-1059(多重背包+二进制优化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1059 题意:输入6个数,每个数ni代表价值为i的物品有ni个.求如果这些物品能均分给两个人,每个人获得 ...

  9. mac os 卸载android studio 从新安装遇到的一些问题

    http://blog.csdn.net/elonspace/article/details/51800949 google中国论坛 http://www.android-studio.org lin ...

  10. react native底部tab栏切换

    1.安装tab栏插件 npm i react-native-tab-navigator --save 2.引入对应的组件和tab插件 import { Platform, StyleSheet, Te ...