这几天在做项目的时候,想在游戏画面之前,在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. MySQL5.7的安装(CentOS 7 & Ubuntu 16.04)

    CentOS 通过 yum 安装MySQL5.7 Yum Repository 下载地址:https://dev.mysql.com/downloads/repo/yum/ 选择相应的版本进行下载:R ...

  2. ApplicationContext(三)BeanFactory 初始化

    ApplicationContext(三)BeanFactory 初始化 上节我们提到容器初始化的第一步首先进行了属性的检验,下面就要开始第二步:进行 beanFactory 的初始化工作了. App ...

  3. luaFramework

    BeginStaticLibs  参考CustomSettings.cs public static List<Type> staticClassTypes = new List<T ...

  4. activiti如何获取当前节点以及下一步路径或节点(转)

    ACTIVITI相对于JBPM来说,比较年轻,用的人少,中文方面的资料更少,我根据网上到处找得资料以及看官方文档总结出来了代码,非常不容易啊.废话不多说,直接上代码吧: 首先是根据流程ID获取当前任务 ...

  5. PHP + Redis 队列实战

    环境 centos6.5 PHP5.3 Redis安装 #yum install redis 1.redis配置认证密码 #vi /etc/redis.conf requirepass mypass ...

  6. jQuery学习笔记:基础

    本文主要总结jQuery中一些知识点 概念 美元符号$是著名的jQuery符号.jQuery把所有功能全部封装在一个全局变量jQuery中,而$也是一个合法的变量名,它是变量jQuery的别名 $本质 ...

  7. idea properties编码问题

    单个文件设置 全局设置default settings

  8. JS高级-***Function- ***OOP

    1. ***Function 作用域(scope): 什么是: 一个变量的使用范围 为什么: 避免函数内外的变量间互相影响 包括: 2种: 1. 全局作用域: window 保存着全局变量: 随处可用 ...

  9. 2017多校1 hdu-Balala Power!

    其实这道题的思路挺简单的,就是找在第一位置没有出现过并且权值小的那个字母为0. 把a~z按照权值排序,其实难就难在这里,权值很大我们怎么给他排序. 其实可以开个数组来存他们每位数是多少,然后给他们比个 ...

  10. day16正则表达式作业

    1.匹配一篇英文文章的标题 类似 The Voice Of China #([A-Z][a-z]*)( [A-Z][a-z]*)* 2.匹配一个网址 #(https|http|ftp):\/\/[^\ ...