微信小程序canvas自定义行走路径及画图及画线覆盖问题以及旋转问题（包含踩过的坑）

CanvasContext 是旧版的接口，新版 Canvas 2D 接口与 Web 一致

从基础库 1.9.90 开始，本接口

ctx.setLineWidth(5)

停止维护，请使用 CanvasContext.lineWidth 代替

新的使用方法开发文档说得不是很清楚，没有具体的代码例子，但是可以参考下小程序开发文档linewidth

  /*** 画路径*/drawRoute1(){let ctx=this.data.ctx;ctx.lineWidth = '3'//设置线段的宽度，这里采用的是赋值的方式 ，数值越大，线的宽度越宽，还有这句话的位置要放在你画的图形的前面，否则渲染不出来ctx.lineCap='round';//设置线段两侧风格ctx.strokeStyle='black';//设置描边颜色ctx.strokeRect(10,10, 250, 250)ctx.stroke()},

以下的图是我随便画出来做个演示的，如果想图片覆盖在线上的话，得把线的 ctx.beginPath()和 ctx.closePath()给写好（反正我是这么做的，不然线会把图片压在下面），详情请看代码。


//index.json{"usingComponents": {}
}

//index.wxml
<canvastype="2d"id="canvas"style="position: relative; left: 2rpx; top: 109rpx; width: 750rpx; height: 1711rpx; display: block; box-sizing: border-box"></canvas>

/* index.wxss */
#canvas{width: 100%;height:1334rpx ;
}
page{background: rgb(211, 245, 239);}

//index.js
Page({data:{ctx:null,img:null,counTimer:null,x:628,y:500},countInterval:function(){let that=this;this.data.counTimer=setInterval(()=>{if(this.data.x==50){clearInterval(this.data.counTimer)}this.setData({x:this.data.x-2})this.drawAll(this.data.x,this.data.y,180)},100)},onLoad:function(){wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec((res)=>{const canvas=res[0].nodeconst cxt=canvas.getContext('2d')canvas.requconst width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprthis.setData({ img:res[0].node.createImage()  ,      ctx:res[0].node.getContext('2d')})this.drawRoute()this.drawcar(628,500,180)const moveLoop=()=>{this.drawAll(this.data.x,this.data.y,180)if(this.data.x>50){canvas.requestAnimationFrame(moveLoop)}else if(this.data.x=50){canvas.cancelAnimationFrame()}this.data.x--;}canvas.requestAnimationFrame(moveLoop)const _img=res[0].node.createImage()this.data.img.onLoad=()=>{}       this.data.img.src='https://hqgw-cos.faw.cn/uploads/cdnImg/src/image/ehs9/ehs9_2_1.png'//this.countInterval()})},drawAll(x,y,p){this.data.ctx.clearRect(0,0,1000,1300)this.drawRoute() this.drawRoute1() this.drawcar(x,y,0)this.drawcar1(x,y,p)},drawRoute(){let ctx=this.data.ctxctx.strokeStyle='green';//设置描边颜色ctx.lineCap='round';//设置线段两侧风格ctx.lineWidth = '20'//设置线段的宽度ctx.save();        // ctx.setLineCap('butt')// ctx.setLineWidth(10)// ctx.font = '50rpx sans-serif'ctx.beginPath()ctx.moveTo(180,250)ctx.lineTo(250,280)ctx.lineTo(520,300)ctx.lineTo(50,380)ctx.lineTo(50,500)ctx.lineTo(628,500)ctx.restore()ctx.stroke()ctx.save()ctx.beginPath()ctx.fillStyle='rgb(200,0,0,0.1)'ctx.fillStyle='rgb(28,28,280,0.5)'ctx.fillRect(578,475,100,50)// ctx.setFillStyle('black')// ctx.setFontSize(12)ctx.closePath()ctx.restore()ctx.stroke()},/*** 画路径*/drawRoute1(){let ctx=this.data.ctx;ctx.lineWidth = '3'//设置线段的宽度ctx.lineCap='round';//设置线段两侧风格ctx.strokeStyle='black';//设置描边颜色ctx.strokeRect(10,10, 250, 250)ctx.stroke()},/*** 画车* @param {x坐标} x * @param {*坐标} y * @param {*角度} p */drawcar(x,y,p){let ctx=this.data.ctxctx.save()ctx.translate(x,y)ctx.rotate(p*Math.PI/180)ctx.drawImage(this.data.img,0-30,0-15,90,60)ctx.restore()ctx.stroke()},drawcar1(x,y,p){let ctx=this.data.ctxctx.save()ctx.drawImage(this.data.img,10,150,50,50)ctx.restore()ctx.stroke()},onUnload: function () {}})

该文为自己原创，有些是按照自己的理解去做的，欢迎大家指正及批评，如有问题，可以评论交流，转载需标明出处，谢谢

微信小程序canvas自定义行走路径及画图及画线覆盖问题以及旋转问题（包含踩过的坑）相关推荐

微信小程序 Canvas 自定义时间显示器数码管显示
微信小程序自定义时间显示器Demo 废话不多话,还是依旧上图再说,哈哈怎么样,效果还是不错的吧,因项目要求,要画出类似于数码管显示的时间样式,没办法,虽然不咋过好弄,但工作毕竟得做,于是乎,楼主,花 ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
微信小程序Canvas实现手写签名
微信小程序Canvas实现手写签名功能描述点击按钮显示弹窗,弹窗主体为签名板,底部两个按钮为清除和保存. 清除按钮:清空签名板保存按钮:保存签名为图片,并关闭弹窗关键点分析 Canvas实现手 ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...

微信小程序canvas自定义行走路径及画图及画线覆盖问题以及旋转问题（包含踩过的坑）

微信小程序canvas自定义行走路径及画图及画线覆盖问题以及旋转问题（包含踩过的坑）相关推荐

最新文章

热门文章