Canvas
获取
<canva id="myCanvas"></canvas>
替换原来的
//绘制图
drawImage
例子:
// 二维码
wx.downloadFile({ url: "http://192.168.0.133/immages/wechat.gif", success: function (res) { if (res.statusCode === 200) { ctx.drawImage(res.tempFilePath, winW-90, winH-90, 80, 80) } } })
//绘制字
font
setTextBaseline
setTextAlign
fillStyle
fillText
例子:
ctx.font = "16px sans-serif"; ctx.setTextBaseline("top"); ctx.setTextAlign("left"); //(left,center,right是根据x轴定义的) ctx.fillStyle = '#fff'; let fontHeight = 90 ctx.fillText('我在加里顿', winW - 200, fontHeight, 60);
beginPath
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
clostPath
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染。
其他方法:
setFontSize
strokeText(fillText)
setShadow
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
// 开始绘制
ctx.draw()
1.绘制线
ctx.beginPath() //创建新路径 ctx.moveTo(10, 10) ctx.lineTo(100, 10) ctx.lineTo(100, 100) ctx.closePath() //关闭路径后没有调用 fill 或者 stroke 并开启了新的路径,那之前的路径将不会被渲染 ctx.stroke()
2.绘制圆(实心或空心圆fill() / stroke())
arc(number x, number y, number r, number sAngle, number eAngle, number counterclockwise)
3.绘制椭圆等
arcTo(number x1, number y1, number x2, number y2, number radius) ctx.moveTo(20,20); ctx.lineTo(100,20);一起用
4.绘制矩形(实心或空心圆fill() / stroke())
ctx.beginPath() ctx.setFillStyle(color); ctx.fillRect(x, y, w, h); ctx.closePath()
5. 转base64
var ext = image.src
.substring(image.src.lastIndexOf('.') + 1)
.toLowerCase();
var dataURL = canvas.toDataURL('image/' + ext);
canvas.toDataURL(type, encoderOptions)
6. 转二进制blob
canvas.toBlob(callback, type, quality)
引擎three.js
微信小程序封装
①、#字体(换行)
function rectDraw(obj, color, array, arrayShadow) { // obj.beginPath() obj.setFillStyle(color); if (arrayShadow) { obj.setShadow(arrayShadow[0], arrayShadow[1], arrayShadow[2], arrayShadow[3]); } else { obj.setShadow(0, 0, 0, '#fff'); } obj.fillRect(array[0] * 2, array[1] * 2, array[2] * 2, array[3] * 2); // obj.closePath(); // obj.fill(); }
function circleDraw(obj, color, array, type) { if (type == 'stroke') { obj.beginPath() obj.arc(array[0], array[1], array[2], array[3], array[4]) obj.setStrokeStyle(color) obj.closePath() obj.stroke() } else { obj.beginPath() obj.setFillStyle(color) obj.setShadow(0, 0, 0, '#fff'); obj.arc(array[0], array[1], array[2], array[3], array[4]) obj.closePath() obj.fill() } }
function lineDraw(obj, color, array, width) { obj.beginPath() if (width) { obj.setLineWidth(width) } obj.moveTo(array[0], array[1]) obj.lineTo(array[2], array[3]) obj.stroke() obj.closePath() }
⑤、#绘制圆形矩形
/** * 绘制圆角矩形 * @param {*} ctx 画板上下文 * @param {*} x 起始点x坐标 * @param {*} y 起始点y坐标 * @param {*} w 矩形宽 * @param {*} h 矩形高 * @param {*} r 圆角半径 * @param {*} bg 背景色 */ export const roundRect = function(ctx, x, y, w, h, r, bg='white') { ctx.beginPath() // 左上弧线 ctx.arc(x + r, y + r, r, 1 * Math.PI, 1.5 * Math.PI) // 左直线 ctx.moveTo(x, y + r) ctx.lineTo(x, y + h - r) // 左下弧线 ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, 1 * Math.PI) // 下直线 ctx.lineTo(x + r, y + h) ctx.lineTo(x + w - r, y + h) // 右下弧线 ctx.arc(x + w - r, y + h - r, r, 0 * Math.PI, 0.5 * Math.PI) // 右直线 ctx.lineTo(x + w, y + h - r) ctx.lineTo(x + w, y + r) // 右上弧线 ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI) // 上直线 ctx.lineTo(x + w - r, y) ctx.lineTo(x + r, y) ctx.setFillStyle(bg) ctx.fill() }
设置阴影影响全局?