如何使用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链接列表
                  })
                }
              })
            });


相关文章
|
定位技术 API
基于Leaflet.draw的自定义绘制实战
本文介绍了如何基于leaflet.draw进行自定义绘制,同时获取对象的bbox和geojson信息。
831 0
基于Leaflet.draw的自定义绘制实战
|
2月前
Pixi入门第二章:绘制各种图形
这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。
71 0
Pixi入门第二章:绘制各种图形
|
2月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
80 0
Pixi入门第一章:绘制一个小精灵
|
2月前
|
图形学
Pixi入门第三章:绘制更多内容
这篇文章作为Pixi.js入门教程的第三章,介绍了如何使用鼠标事件(如mousemove)来实现在画布上绘制线条的功能,并提供了实现动态绘制的代码示例。
34 0
|
5月前
|
前端开发
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
|
7月前
|
前端开发 小程序 Java
Graphics2D画图案例
Graphics2D画图案例
|
XML 移动开发 前端开发
Canvas 和 SVG 绘图的区别
Canvas 和 SVG 绘图的区别
102 0
|
移动开发 前端开发 JavaScript
利用Canvas进行网上绘图
利用Canvas进行网上绘图
200 0
零基础VB教程059期:circle画图模拟烟花效果
零基础VB教程059期:circle画图模拟烟花效果
259 0
|
前端开发 JavaScript
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下。如图: 在这里插入图片描述 HTML代码: <canvas id="my_canvas"></canvas> <canvas id="my_canvas2"></canvas> 1 2 CSS代码: * { margin: 0; } #my_canvas {
教你如何用Canvas绘制整身的哆啦A梦