<canvas wx:else class="canvas {{tempSrc ? 'hide' : ''}}" id="canvas" type="2d" style="height: {{height}}rpx" force-use-old-canvas="true"></canvas>

// pages/dispatch/waybillModel/components/shareDrawing/index.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { photoFile: '' //本地图片路径 }, /** * 组件的方法列表 */ methods: { /** * 获取本地图片 */ getPhotoFile: function(e) { e.success(this.data.photoFile); }, getShareDrawing: function(e) { let _this = this; let goodsName = e.goodsName; //货物名称 let beginCity = e.beginCity; //出发省份 let beginAddress = e.beginAddress; //出发详细地址 let endCity = e.endCity; //目的地城市 let endAddress = e.endAddress; //目的地详情地址 let QRCode = e.QRCode; //二维码图片 //返回一个 SelectorQuery 对象实例 const query = this.createSelectorQuery(); //选择canvas query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => {     const canvas = res[0].node; //获取 canvas 对象 const ctx = canvas.getContext('2d'); // 获取Context 对象 //canvas 缩放 const dpr = wx.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); //绘制顶部边条 _this.setHeadStrip(canvas, ctx); //绘制货物名称 _this.setTitle(ctx, goodsName); //绘制提示 _this.setTips(ctx); //绘制二维码 _this.setQRCode(canvas, ctx, QRCode) //绘制出发地图标 _this.setBeginIcon(canvas, ctx); //绘制出发省份 _this.setBeginCity(ctx, beginCity); //绘制出发详细地址 _this.setBeginAddress(ctx, beginAddress); //绘制目的地图标 _this.setEndIcon(canvas, ctx); //绘制目的地城市 _this.setEndCity(ctx, endCity); //绘制目的地详情地址 _this.setEndAddress(ctx, endAddress); //生成图片 wx.canvasToTempFilePath({ canvas, success(res) { _this.setData({ photoFile: res.tempFilePath }) } }) //end exec }) //end }, /** * 设置货物名称 * @param {Object} ctx  Context 对象 * @param {Object} str  名称文本 */ setTitle: function(ctx, str) { const width = 342 // 获取设备宽度 ctx.font = '500 19px PingFangSC-Medium'; ctx.fillStyle = '#000'; ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 40); }, /** * 设置顶部条形 * @param {Object} canvas canvas 对象 * @param {Object} ctx  Context 对象 * @param {Object} src 图片链接 */ setHeadStrip: function(canvas, ctx) { const headerImg = canvas.createImage(); // 获取image 对象 headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/head.png'; headerImg.onload = () => { ctx.drawImage(headerImg, 0, 0, 342, 10); }; }, /** * 绘制二维码 * @param {Object} canvas  canvas 对象 * @param {Object} ctx  Context 对象 * @param {Object} src 图片链接 */ setQRCode: function(canvas, ctx, src) { const headerImg = canvas.createImage(); // 获取image 对象 headerImg.src = src; headerImg.onload = () => { ctx.drawImage(headerImg, 101, 103, 140, 140); ctx.restore(); }; }, /** * 绘制提示 * @param {Object} ctx  Context 对象 */ setTips: function(ctx) { const width = 342 // 获取设备宽度 ctx.font = '500 15px PingFangSC-Medium'; ctx.fillStyle = '#F1950A'; let str = "请司机扫码上传证件"; ctx.fillText(str, (width - ctx.measureText(str).width) * 0.5, 70); }, /** * 绘制出发地图标 *  @param {Object} canvas  canvas 对象 *  @param {Object} ctx  Context 对象 */ setBeginIcon: function(canvas, ctx) { const headerImg = canvas.createImage(); // 获取image 对象 headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/begin1.png'; headerImg.onload = () => { ctx.drawImage(headerImg, 30, 300, 21, 34); }; }, /** * 绘制出发城市 */ setBeginCity: function(ctx, str) { ctx.font = '500 16px PingFangSC-Medium'; ctx.fillStyle = '#000'; ctx.fillText(str, 61, 310); }, /** * 绘制详细地址 */ setBeginAddress: function(ctx, str) { ctx.font = '400 14px PingFangSC-Medium'; ctx.fillStyle = '#666666'; ctx.fillText(str, 61, 330); }, /** * 绘制目的地图标 *  @param {Object} canvas  canvas 对象 *  @param {Object} ctx  Context 对象 */ setEndIcon: function(canvas, ctx) { const headerImg = canvas.createImage(); // 获取image 对象 headerImg.src = 'https://cdn.nucarf.cn/xgb/v1.0/public/end1.png'; headerImg.onload = () => { ctx.drawImage(headerImg, 30, 368, 21, 34); }; }, /** * 绘制目的地城市 */ setEndCity: function(ctx, str) { ctx.font = '500 16px PingFangSC-Medium'; ctx.fillStyle = '#000'; ctx.fillText(str, 61, 380); }, /** * 绘制目的地详细地址 */ setEndAddress: function(ctx, str) { ctx.font = '400 14px PingFangSC-Medium'; ctx.fillStyle = '#666666'; ctx.fillText(str, 61, 400); } } })

showImage(canvas) {       wx.canvasToTempFilePath({         x:0,         y:0,         width: 200,         height: 200,         destWidth:100,         destHeight:100,         canvas: this.data.canvas,         quality: 1,         success: res => {           console.log(res);           this.setData({             imgShow: res.tempFilePath           }) }) } 用的2D,所以没有用draw()，用了会报错

1、第一个设置了粗体，第二个不设置粗体，第二个还是显示粗体 ctx.setFillStyle('#000000'); ctx.beginPath(); ctx.font = 'normal bold 20px sans-serif'; ctx.fillText('test code', 0, 20); ctx.beginPath(); ctx.font = 'normal normal 20px sans-serif'; ctx.fillText('test code', 0, 60); 2、不设置粗体的情况下，设置斜体无效 ctx.setFillStyle('#000000'); ctx.beginPath(); ctx.font = 'italic normal20px sans-serif'; ctx.fillText('test code', 0, 20); 3、英文数字设置斜体有效，中文无效 ctx.setFillStyle('#000000'); ctx.beginPath(); ctx.font = 'italic bold 20px sans-serif'; ctx.fillText('测试代码', 0, 20);

在客户端查看正常 [图片] 手机查看无效果 [图片] 设置为： [图片]

微信canvas画布绘制斜体文字无效 ctx.font = "italic bold 16px PingFangSC-Regular"

[代码]ctx.font = [代码][代码]'italic 16px sans-serif'[代码][代码]ctx.fillText([代码][代码]'2019 / 07 / 星期一'[代码][代码], 20, 100)[代码]在工具中显示是斜体 到真机上只有数字部分显示是斜体，中文没有斜体效果

在用canvas2d绘制文字时，用font设置字体为粗斜体。在开发者工具和安卓上可以正常显示，在iphone7（ios13.5）上没有生效。 Api： const ctx = canvas.getContext("2d"); ctx.font = "italic bold 18px PingFangSC-Regular";   微信版本号： 7.0.14 使用废弃的api，用font设置字体为粗斜体。在开发者工具、安卓、iphone7（ios13.5）上都可以正常显示。 const ctx = wx.createCanvasContext("myCanvas"); ctx.font = "italic bold 18px PingFangSC-Regular";  

在ios中 canvas 设置 ctx.font = "oblique bold 30px SemHei" 斜体。 在开发者工具以及安卓端都会支持 。ios端不支持，在真机不是斜体。 请查看。

微信小程序2.9.0及以上版本使用 canvas.getContext('2d')绘图出现异常，高度会莫名其妙拉伸1倍，模拟器和真机均有此现象。 代码如下： wxml [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"container"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]canvas[代码] [代码]id[代码][代码]=[代码][代码]"canvas1"[代码] [代码]type[代码][代码]=[代码][代码]"2d"[代码] [代码]style[代码][代码]=[代码][代码]"width: 300px; height: 300px;  background-color: #ffffff;"[代码][代码]></[代码][代码]canvas[代码][代码]>   [代码][代码]</[代码][代码]view[代码][代码]>[代码]javscript [代码]Page({[代码][代码]    [代码][代码]data: {[代码] [代码]    [代码][代码]},[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]wx.createSelectorQuery()[代码][代码]        [代码][代码].select([代码][代码]'#canvas1'[代码][代码])[代码][代码]        [代码][代码].node()[代码][代码]        [代码][代码].exec((res) => {           [代码][代码]            [代码][代码]this[代码][代码].init(res[0].node);[代码][代码]         [代码][代码]}) ;[代码][代码]    [代码][代码]},[代码][代码]   [代码] [代码]    [代码][代码]init(canvas) {  [代码][代码]        [代码][代码]var[代码] [代码]_context = canvas.getContext([代码][代码]'2d'[代码][代码])[代码][代码]        [代码][代码]_context.scale(1, 1);[代码][代码]        [代码][代码]_context.strokeStyle = [代码][代码]"#00ff00"[代码][代码]        [代码][代码]_context.lineWidth = 1[代码][代码]        [代码][代码]_context.rect(0, 0, 100, 100)[代码][代码]        [代码][代码]_context.stroke()[代码][代码]    [代码][代码]}[代码][代码]})[代码][图片] 经分析，2.9.0版本和2.8.3版本使用SelectorQuery获取Canvas节点返回高度存在不同。 javscript [代码]Page({[代码][代码]    [代码][代码]data: {[代码] [代码]    [代码][代码]},[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]wx.createSelectorQuery()[代码][代码]        [代码][代码].select([代码][代码]'#canvas1'[代码][代码])[代码][代码]        [代码][代码].node()[代码][代码]        [代码][代码].exec((res) => {           [代码][代码]            [代码][代码]this[代码][代码].init(res[0].node);[代码][代码]         [代码][代码]}) ;[代码][代码]    [代码][代码]},[代码][代码]   [代码] [代码]    [代码][代码]init(canvas) {  [代码][代码]        [代码][代码]console.log([代码][代码]'width:'[代码][代码]+canvas.width, [代码][代码]'height:'[代码][代码]+canvas.height)[代码][代码]        [代码][代码]console.log([代码][代码]'_width:'[代码][代码]+canvas._width, [代码][代码]'_height:'[代码][代码]+canvas._height)[代码][代码]    [代码][代码]}[代码][代码]})[代码]2.8.3版本 [图片] 2.9.0版本 [图片] 临时解决方法: 用SelectorQuery获取Canvas节点后，设置canvas的width和height值 [代码]Page({[代码][代码]    [代码][代码]data: {[代码] [代码]    [代码][代码]},[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码]        [代码][代码]wx.createSelectorQuery()[代码][代码]            [代码][代码].select([代码][代码]'#canvas1'[代码][代码])[代码][代码]            [代码][代码].node()[代码][代码]            [代码][代码].exec((res) => {[代码][代码]                [代码][代码]this[代码][代码].init(res[0].node);[代码][代码]            [代码][代码]});[代码][代码]    [代码][代码]},[代码] [代码]    [代码][代码]init(canvas) {[代码][代码]        [代码][代码]console.log([代码][代码]'width:'[代码] [代码]+ canvas.width, [代码][代码]'height:'[代码] [代码]+ canvas.height)[代码][代码]        [代码][代码]console.log([代码][代码]'_width:'[代码] [代码]+ canvas._width, [代码][代码]'_height:'[代码] [代码]+ canvas._height)[代码][代码]        [代码][代码]canvas.width =  canvas._width[代码][代码]        [代码][代码]canvas.height =  canvas._height[代码][代码]        [代码][代码]var[代码] [代码]_context = canvas.getContext([代码][代码]'2d'[代码][代码])[代码][代码]        [代码][代码]_context.scale(1, 1);[代码][代码]        [代码][代码]_context.strokeStyle = [代码][代码]"#00ff00"[代码][代码]        [代码][代码]_context.lineWidth = 1[代码][代码]        [代码][代码]_context.rect(0, 0, 100, 100)[代码][代码]        [代码][代码]_context.stroke()[代码][代码]    [代码][代码]}[代码][代码]})[代码][图片]