如何使用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信息。
798 0
基于Leaflet.draw的自定义绘制实战
|
1月前
Pixi入门第二章:绘制各种图形
这篇文章是Pixi.js入门系列的第二章,重点在于如何使用Pixi.js绘制各种基本图形,如矩形、圆角矩形、圆形和椭圆,并提供了具体的代码示例。
37 0
Pixi入门第二章:绘制各种图形
|
4月前
|
前端开发
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
Canvas添加了橡皮擦工具的画板项目和只能画圆的源码
|
6月前
|
前端开发 小程序 Java
Graphics2D画图案例
Graphics2D画图案例
|
XML 移动开发 前端开发
Canvas 和 SVG 绘图的区别
Canvas 和 SVG 绘图的区别
97 0
|
XML JavaScript API
QT5图形与画图
Qt提供了很多关于获取窗体位置及显示区域大小的函数,如x( )、y()和pos()、 rect()、size()、geometry()等,统称为“位置相关函数”或"位置函数”,如图6.1 所示是几种主要的位置函数,图中清楚地标出了它们之间的区别。
113 0
|
移动开发 前端开发 JavaScript
利用Canvas进行网上绘图
利用Canvas进行网上绘图
197 0
零基础VB教程059期:circle画图模拟烟花效果
零基础VB教程059期:circle画图模拟烟花效果
237 0
|
前端开发 JavaScript
教你如何利用canvas画布绘制哆啦A梦
订阅专栏 教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦。如图: HTML代码: <canvas id="my_canvas"></canvas> 1 CSS代码: canvas { display:block; margin:0 auto; background: pink } 1 2 3 4 5 JavaScript代码: var oCanvas = document.getEleme
教你如何利用canvas画布绘制哆啦A梦
|
前端开发 JavaScript
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下。如图: 在这里插入图片描述 HTML代码: &lt;canvas id=&quot;my_canvas&quot;&gt;&lt;/canvas&gt; &lt;canvas id=&quot;my_canvas2&quot;&gt;&lt;/canvas&gt; 1 2 CSS代码: * { margin: 0; } #my_canvas {
教你如何用Canvas绘制整身的哆啦A梦