uni-app 小程序 网页 canvas 简单运用
x-y轴示意创建canvas//html<canvas id="canvas" width="400" height="300">// wx uni<view class="" style="width: 750rpx;height: 1000rpx;"><canvas canvas-id="canvas" style="width: 100%;height: 100
·
x-y轴示意
创建canvas
//html
<canvas id="canvas" width="400" height="300">
// wx uni
<view class="" style="width: 750rpx;height: 1000rpx;">
<canvas canvas-id="canvas" style="width: 100%;height: 100%;" />
</view>
----------------------------------------------------------------------------
//js
//uni
var context = uni.createCanvasContext('canvas')
//wx
var context = wx.createCanvasContext('canvas')
//html
var context = document.getElementById('canvas').getContext('2d')
---------------------------------------------------------------------------
//分步
//矩形
context.rect( x ,y ,width, height)
//填充
context.fill();
context.draw()
//边框
context.stroke();
context.draw()
----------------------------------------------------------------------------
//一次性绘制
//矩形填充
context.fillRect( x ,y ,width, height);
context.draw()
//矩形边框
context.strokeRect( x ,y ,width, height);
context.draw()
----------------------------------------------------------------------------
//颜色
//填充颜色 默认黑色
context.setFillStyle("#ff0000");
context.fillRect( x ,y ,width, height);
context.draw();
//边框颜色 默认黑色
context.setStrokeStyle("#00ff00");
context.strokeRect( x ,y ,width, height);
context.draw();
----------------------------------------------------------------------------
//## 渐变色
//线性渐变
var grad = context.createLinearGradient( x0 , y0 , x1 , y1)
//介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
grad.addColorStop(0,"#f00");
grad.addColorStop(1,"#00f");
//填充
//设置fillStyle为当前的渐变对象
context.fillStyle=grad;
//绘制填充渐变图形
context.fillRect( x ,y ,width, height);
context.draw();
//边框
//设置strokeStyle为当前的渐变对象
context.strokeStyle=grad;
//绘制边框渐变图形
context.strokeRect( x ,y ,width, height);
context.draw();
## ***附图2***
//径向渐变 html
var grad = context.createRadialGradient(x1, y1, r1, x2, y2, r2)
//径向渐变 uni 小程序
var grad = context.createCircularGradient(x,y,r);
//介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置
grad.addColorStop(0,"#f00");
grad.addColorStop(.5,"#0f0");
grad.addColorStop(1,"#00f");
//填充颜色，边框颜色
context.fillStyle=grad;
context.strokeStyle=grad;
//绘制填充渐变图形
context.fillRect( x ,y ,width, height);
context.draw();
---------------------------------------------------------------------------
//透明度
context.globalAlpha = 0.5;
//填充
context.fillRect( x ,y ,width, height);
//边框
context.strokeRect( x ,y ,width, height);
context.draw();
--------------------------------------------------------------------------
//阴影
//负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0
context.shadowOffsetX=float;
context.shadowOffsetY=float;
//设定阴影的模糊程度
context.shadowBlur=float;
context.shadowColor="#333333";
//填充
context.fillRect( x ,y ,width, height);
//边框
context.strokeRect( x ,y ,width, height);
context.draw();
------------------------------------------------------------------------
//圆
//开始或重置路径
context.beginPath();
//绘制圆弧或者圆
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
//圆或弧边框
context.stroke();
//圆或弧填充
context.fill();
--------------------------------------------------------------------------
//切线圆
//开始或重置路径
context.beginPath();
//开始坐标
context.moveTo(x,y);
//移动位置
context.lineTo(x,y);
//绘制圆弧路径
context.arcTo(x1, y1, x2, y2, radius)
//移动位置
context.lineTo(x,y);
//圆或弧边框
context.stroke();
//圆或弧填充
context.fill();
## 附图3
--------------------------------------------------------------------------
//文本
//font = 'style variant weight size/line-height family'
//style(font-style)：字体样式，可选值：normal, italic, oblique
//variant(font-variant)：字体变体，可选值：normal, small-caps
//weight(font-weight)：字体粗细，可选值：normal, bold, bolder, lighter, 100 - 900
//size/line-height：字号和行高
//family(font-family)：字体
//文本的样式 10px sans-serif
context.font="30px Arial";
//文本对齐选项. 可选值：start, end, left, right, center. 默认值 start
context.textAlign = "end"
//基线对齐选项，可选值：top, hanging, middle, alphabetic, ideographic, bottom。默认值 alphabetic
context.textBaseline = "top"
//文本方向。可选值：ltr, rtl, inherit。默认值 inherit
context.direction = "rtl"
//填充指定的文本 绘制的最大宽度可选
context.fillText(text, x, y , maxWidth)
//绘制文本边框 绘制的最大宽度可选
context.strokeText(text, x, y , maxWidth)
context.draw()
图2
图3
剪切图像参考
https://uniapp.dcloud.io/api/canvas/CanvasContext?id=canvascontextclip
参考
https://www.kancloud.cn/dennis/canvas/340115
https://uniapp.dcloud.io/component/canvas?id=canvas
补充
图片添加水印，导出临时地址（uni-app）
<view class="" v-show="imgInfo.imgWith" :style="{width: imgInfo.imgWith + 'px',height: imgInfo.imgHeight + 'px'}" style="position: fixed;left: 750upx;">
<canvas canvas-id="canvas" style="width: 100%;height: 100%;" />
</view>
picture(){
const that = this;
uni.showLoading({
title:'加载中...'
})
uni.chooseImage({
count:1,
sourceType:['camera'],
success(res){
console.log(res)
uni.getImageInfo({
src: res.tempFilePaths[0],
success: function (image) {
console.log(image);
that.imgInfo.imgWith = image.width;//页面canvas的宽
that.imgInfo.imgHeight = image.height;//页面canvas的高
setTimeout(() => { //uni-app渲染延时
var context = uni.createCanvasContext('canvas')//获取canvas实例
context.drawImage(res.tempFilePaths[0], 0, 0,image.width,image.height)//放入图片
context.stroke();
context.fillStyle="#FFFFFF";//字体颜色
context.shadowColor="rgba(0, 0, 0, 0.7)";//字体的阴影
// context.shadowOffsetX = 20;//字体的阴影X偏移
// context.shadowOffsetY = 20;//字体的阴影Y偏移
context.shadowBlur = 50; //字体的阴影模糊
context.font="100px PingFangSC-Semibold, PingFang SC";
context.fillText('文本内容')=, 50, image.height - 200)
context.stroke();
context.draw(); //完成绘画
setTimeout(()=>{//uni-app渲染延时
uni.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'canvas',
quality: 1,
fileType:'jpg',
success: function(canvas) {
that.canvasImg = canvas.tempFilePath;
uni.uploadFile({
url: 'xxxx/api/file/fileArrayUpload',
filePath: canvas.tempFilePath,
header:'',
success: (res) => {
console.log(JSON.parse(res.data).data)
},
fail: (err) => {
},
complete(complete) {
uni.hideLoading();
}
});
} ,
})
},200)
},200)
}
});
}
})
},
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)