微信小程序·canvas 画布基本方法
0】涂鸦
//html <canvas class="canvas" style="height:{{Height}}px;width:{{Width}}px;" type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" > </canvas>
//js-data 属性 pen: 2, color: '#000fff', canvas: '', ctx: '', first: true,
//js-fun 画线 start(e) { if (this.data.first) { this.clearClick(); this.setData({ first: false }) } this.data.ctx.beginPath(); // 开始创建一个路径,如果不调用该方法,最后无法清除画布 this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条 }, move(e) { this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条 this.data.ctx.stroke() }, // 初始化Canvas createCanvas() { const query = wx.createSelectorQuery(); query.select('#canvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); canvas.width = this.data.Width; // 画布宽度 canvas.height = this.data.Height; // 画布高度 console.log(this.data.pen,this.data.color) //ctx.scale(pr, pr); // 缩放比 ctx.lineGap = 'round'; //圆 ctx.lineJoin = 'round'; //圆 ctx.lineWidth = this.data.pen; // 字体粗细 // ctx.font = '40px Arial'; // 字体大小, ctx.fillStyle = '#f00'; //设置字体颜色 ctx.strokeStyle = '#f00'; //线条边框颜色 //ctx.fillText('签名区', res[0].width, res[0].height) this.setData({ ctx, canvas }) }) }, clearClick() {//清除画布 this.data.ctx.clearRect(0, 0, this.data.Width, this.data.Height); // clearRect(线条位置x,线条位置y,画宽,画高) },
1】设置背景图
var select = wx.createSelectorQuery(); select.select('#canvas').context(res => { var ctx = res.context ctx.setFillStyle("#FF0000") //drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height) ctx.drawImage('../../static/cool.jpg', 200, 150, 160, 180, 70, 60, 160, 180); //图片 ctx.draw() //开始绘制 }).exec()
2】保存图片
wx.canvasToTempFilePath({ canvasId: "canvas", canvas: '', fileType: 'png', //jpg 、png width: 300, //指定画布区域 height: 300, //指定画布区域 x: 0, //指定画布区域的左上角横坐标 y: 0, //指定画布区域的左上角纵坐标 success(res) { console.log("图片地址", res.tempFilePath); } })
3】字体属性
ctx.font = '50px 宋体'; //设置字体大小 ctx.fillStyle = '#000'; //设置字体颜色 //绘制空心文字 ctx.strokeStyle = '#f00'; //线条边框颜色 ctx.strokeText('你好', 50, 250, 100); //内容 左 上 宽 ctx.fillText('你好', 50, 250, 100); //内容 左 上 宽 ctx.strokeStyle = '#abc'; //线条边框颜色
渐变色】
//设置线性渐变 var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); //从0到整个区域的一半由黄渐变到蓝 //从中间到最后由蓝渐变到红 gradient.addColorStop('0', '#abc'); gradient.addColorStop('0.5', '#f11'); gradient.addColorStop('1.0', '#fff'); //应用渐变,空心文字 ctx.strokeStyle = gradient; ctx.strokeText('Hello Canvas!!!', 0, 300, 500); //内容 左 上 宽 //实心文字 ctx.fillStyle = gradient; ctx.fillText('Hello World!!!', 0, 200, 500); //内容 左 上 宽
属性】
ctx.beginPath(); //开始绘制 ctx.closePath(); //关闭绘制 ctx.fillRect(0, 0, 321, 432); //x,y,w,h 画布大小 ctx.fillStyle = "#fff" //绘制背景颜色 ctx.fillRect(10,10,80,80); //绘制背景块
4】画线条
ctx.beginPath(); //开始绘制 ctx.moveTo(10,200); // x,y 开始 ctx.lineTo(100,200); // x,y 结束 ctx.strokeStyle = "#f11"; ctx.stroke(); //绘制 ctx.closePath(); //关闭绘制
5】画正方形
//画正方形横线 ctx.beginPath(); //开始绘制 ctx.moveTo(10, 10); // x,y 开始 ctx.lineTo(10, 200); // x,y 结束 ctx.lineTo(200, 200); // x,y 结束 ctx.lineTo(200, 10); // x,y 结束 ctx.lineTo(10, 10); // x,y 结束 ctx.strokeStyle = "#f11"; ctx.stroke(); //绘制
1,725 Views