安装微信小程序和工具的操作就不再介绍了。
canvas 是一个画布，我们可以在上面绘制内容。所有绘制的内容需要使用一个屏幕坐标系，屏幕坐标系是以屏幕的左上角的点为0,0点。右方向为X轴正方向，下方向为Y轴正方向。

在Canvas 上进行绘制

let ctx = canvas.getContext('2d')
export default class Main{constructor(){ctx.fillStyle = 'green';ctx.fillRect(0,300,100,100);}
}

通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext，调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法，详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂，所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。
通过设置 width 和 height 属性可以改变 Canvas 对象的宽高，但这也会导致 Canvas 内容的清空和渲染上下文的重置。

canvas.width = 300
canvas.height = 300

显示图片

         let image = wx.createImage();image.onload = function(){ctx.drawImage(image,0,0,53,33)}image.src = "images/Unity.jpg";

通过 wx.createImage() 接口，可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时，图片才会显示在屏幕上。

设置 Image 对象的 src 属性可以加载一张本地图片或网络图片，当图片加载完毕时会执行注册的 onload 回调函数，此时可以将 Image 对象绘制到 Canvas 上。

九宫格摆放

let ctx = canvas.getContext('2d')
export default class Main{constructor(){this.createImages();}createImages(){for (let i = 0; i < 3; i++) {//控制的是行数for (let j = 0; j < 3; j++) {//控制的是列数let image = wx.createImage();image.onload = function(){ctx.drawImage(image,j * (10+53),i*(10+33),53,33)}image.src = "images/Unity.jpg";}}}
}

00001-微信小游戏--显示图片相关推荐

Unity3d C# 开发微信小游戏分享图片、朋友圈等功能实现（含源码）
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前编写了一篇u3 ...
解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。
配置跨域首先在mainifest.json中的源码视图中配置跨域. "h5": {"devServer": {"port": 8080,& ...
Laya官方不会告诉你的坑（微信小游戏系列）
Laya官方不会告诉你的坑(微信小游戏系列) 使用laya2系列调试微信小游戏的时候, 发现了以下问题, 看了一圈官网也没提及, 所以记录一下供大家参考和讨论. 1.报错 ReferenceError ...
微信小程序image图片预览时不显示（后缀问题！）
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程相对图片路径_微信小程序----相对路径图片不显示
出现场景在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示. 出现图片不显示的原因小程序只支持网络路径和base64的图片.图片转base64在线工具处理方法将图片都放到服务器,然 ...
cocos微信小游戏开发-http请求-使用微信云函数-toast-loading-动态加载图片-添加触摸事件-微信分享-label点击事件-背景音乐音效-程序活动状态判断-性能优化
cocos开发微信小游戏相关-<益智推箱> 扫码查看功能,有需要可直接提问 Cocos Creator 3.4 用户手册 cocos creator基本操作微信开发文档|云函数 1. h ...
在微信小游戏中使用three.js显示3D图形
年前,微信发布了一个重磅消息:微信小程序的小游戏功能,千呼万唤始出来! 笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技 ...
微信小游戏开发教程-游戏实现2
微信小游戏开发教程-游戏实现2 绘制地面类似于绘制背景,读者自行完成代码.src/runtime/land.js 简易View系统坐标布局对于复杂的页面来说维护相当困难,因此这里我们引入布局的概念 ...

00001-微信小游戏--显示图片

在Canvas 上进行绘制

显示图片

九宫格摆放

00001-微信小游戏--显示图片相关推荐

最新文章

热门文章