如何使用canvas进行画图

简介: 如何使用canvas进行画图

画一个矩形

//创建一个画布
const ctx = wx.createCanvasContext('myCanvas')
// 设置矩形边框
ctx.setStrokeStyle('#fff')
// 设置矩形宽高  四个参数,前俩个为x,y轴,后俩个是矩形的宽和高


在画布上填充文字


// 设置文字大小
ctx.setFontSize(14)
// 设置文字颜色
ctx.fillStyle = '#9d9d9d';
//设置字体
ctx.font = '黑体';
// 填充文字
在画布上填充图片
let canvas ='../../resource/canvas.png';

网络图片本地保存

// // 封面图
        var path = 'https://www.weiuid.com/attachs/uploads/20180904/f807827b32d5668462ac3e51f949592e.jpg';
        wx.getImageInfo({
          src: path,//服务器返回的图片地址
          success: function (res) {
            //res.path是网络图片的本地地址
            let Path = res.path;
            ctx.drawImage(Path, 0, 0, 400, 200)
          },
          fail: function (res) {
            //失败回调
          }


最后一步即可


ctx.draw()


将canvas画完之后,保存为图片,进行预览


ctx.draw(false, function () {
              wx.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: function (res) {
                  console.log(res.tempFilePath)
                  wx.previewImage({
                    urls: [res.tempFilePath] // 需要预览的图片http链接列表
                  })
                }
              })
            });


相关文章
|
存储 弹性计算 架构师
云服务器基准性能测试
随着数字化的不断发展,企业 IT 上云早已是大势所趋,通常上云的第一步是选一款云服务器。然而云服务器的型号众多,如阿里云的云服务器规格就多达上百款(详见https://help.aliyun.com/document_detail/25378.html),因此在选择具体一款规格的云服务器时,通常需要对云服务器的性能做一个基准测试,然后再做一轮业务测试。本最佳实践适合利用标准的benchmark工具对云服务器的CPU、内存、网络和磁盘性能进行测试的场景。
1905 1
云服务器基准性能测试
|
存储 编解码 缓存
视频平台技术成本控制的量化方法
在线视频平台为用户提供服务时,面临的一个严重的挑战是,如何保证在为用户提供流畅 且稳定播放服务的前提下,尽量降低整体运营成本。本篇文章将围绕上述问题,重点讨论技术实践中的成本控制手段。
视频平台技术成本控制的量化方法
|
安全 数据处理 数据安全/隐私保护
C/S架构与B/S架构的适用场景分析
C/S架构(客户端/服务器架构)与B/S架构(浏览器/服务器架构)在适用场景上各有特点,主要取决于应用的具体需求、用户群体、系统维护成本、跨平台需求等因素。
1126 6
|
9月前
|
小程序 JavaScript 关系型数据库
weixin118电影院订票选座系统设计及实现+ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的电影院订票选座系统。该系统采用WXML、WXS、JS小程序语言开发,结合微信开发者工具和MYSQL数据库,实现了便捷的订票选座功能。用户无需下载安装,通过微信即可快速访问,操作简单高效。系统分为用户与管理员两大模块,支持电影信息查询、在线选座、订单管理等功能,同时确保数据安全与用户体验。经过可行性分析、功能设计、测试等环节,系统表现出良好的稳定性、实用性和可扩展性,为用户提供了一个全面、便捷的订票平台。
|
11月前
|
API
阿里云百炼插件2.0版本常见问题汇总
本篇文章主要介绍了自定义插件2.0版本的常见问题。
446 4
|
SQL 存储 安全
网络安全与信息安全概述####
本文探讨了网络安全(Cybersecurity)和信息安全(Information Security)的基本概念及其差异,重点介绍了网络安全漏洞、加密技术及安全意识在信息保护中的重要性。本文旨在通过深入分析这些关键技术和策略,提升对信息安全整体性的理解,帮助读者在数字化时代更好地应对信息安全挑战。 ####
|
存储 测试技术 开发者
docker中将数据卷挂载到容器
【10月更文挑战第11天】
493 3
|
NoSQL Ubuntu 网络协议
qemu 虚拟机
qemu 虚拟机
404 8
|
Java Serverless API
Java 后台开发的新趋势与应用
Java 后台开发的新趋势与应用
301 2