熬夜总结了 “HTML5 画布” 的知识点（共 10 条）

var img = new Image();img.src = 'logo.png';img.onload = function() {    ctx.drawImage(img,0,0,40,40,0,0,80,80);}

var imageData = ctx.getImageData(x,y,w,h)
返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]

ctx.putImageData(imageData,x,y)
把imageData放在(x,y)处

ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)
只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域

context.arc(x,y,radius, starAngle,endAngle, anticlockwise)
圆心(x,y)  半径radius从starAngle到endAngleanticlockwise代表是否逆时针方向

context.quadraticCurveTo(qcpx,qcpy, qx,qy)

context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)

ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处
ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高h
ctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh

<style>#canva {    border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 绘制宽高200的canvas</div>

var canvas = document.getElementById("canvas")
可以使用通过标签名称来获取对象的getElementsByTagName方法

var context  = canvas.getContext("2d")

context.font="98px 黑体"; // 文字样式context.fillStyle="red"; // 文字颜色context.textAlign = "center"; // 文字对齐方式// 绘制文字context.fillText("达达前端"，100, 123, 234);

drawImage(image, x, y) // 在画布上定位图像// 方法在画布上绘制图像、画布或视频。// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
drawImage(image, x, y, width, height)// 在画布上定位图像，并规定图像的宽度和高度
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切图像，并在画布上定位被剪切的部分

function Draw() {    // 获取canvas对象    var canvas = document.getElementById("canvas");     // 获取2d上下文绘图对象    var context = canvas.getContext("2d");     // 使用Image()构造函数创建图像对象    var newImg = new Image();     // 指定图像的文件地址    newImg.src = "../images/dadaqianduan.jpg";     newImg.onload = function () {        // 左上角开始绘制图像        context.drawImage(newImg, 0, 0);         context.drawImage(newImg, 250, 100, 150, 200);         context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120);    }}

// canvas 宽高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas {    border: 2px solid #ccc;}</style><script>    // 获取canvas    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 设置字体    context.font="98px 黑体";    // 填充    context.fillStyle="#036";    // 文本水平位置    context.textAlign="center";    // 执行绘制    context.fillText("达达前端",100, 120, 200);</script>

// 绘制矩形边框strokeRect(x,y, width, height);

// 填充矩形区域fillRect(x,y,width,height);

// 绘制矩形function drawRect() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 描边    context.strokeStyle = "#000";    // 线条宽度    context.lineWidth = 1;    // 矩形边框    context.strokeRect(50,50, 150, 100);    // 填充    context.fillStyle="#f90";    // 矩形    context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);

// 擦除指定的矩形区域context.clearRect(x,y,width,height)

// 为画布设置边框canvas {    border: 1px solid #ccc;}// 准备画布，默认是300*150// 设置画布的大小<canvas width="1200" height="800"></canvas>// 准备绘制工具<script>// 获取元素var myCanvas = document.querySelector('canvas');// 获取上下文，绘制工具箱var ctx = myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线，轨迹ctx.lineTo(200,100);// 描边ctx.stroke()

// 规定元素的 id、宽度和高度<canvas id="myCanvas" width="200" height="100"></canvas>

var grid = 10;// 画多少条x轴方向的线，横向的条数，画布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 画布宽高ctx.canvas.widthctx.canvas.height// 网格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 总线条var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(0, i*gridSize-0.5);    ctx.lineTo(canvasWidth, i*gridSize-0.5);    ctx.strokeStyle='#eee';    ctx.stroke();}// 画多少条y轴方向的线var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(i*gridSize-0.5,0);    ctx.lineTo(i*gridSize-0.5,canvasHeight);    ctx.strokeStyle='#eee';    ctx.stroke();}

// 绘制坐标系var space = 20;var arrowSize = 10;// 画布宽高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐标系var x0 = space;var y0 = canvasHeight - space;// 绘制x轴ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭头ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 绘制y轴ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭头ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 绘制点var coordinate = {    x: 146,    y: 356}// 点尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();

// 圆形context.arc(100,100,30,0,Math.PI*2,true);

function DrawLine() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 创建绘制过程    context.beginPath();    context.moveTo(50,50);    context.lineTo(120,120);    context.lineTo(120,60);    context.closePath();    context.strokeStyle="#000";    // 执行绘制    context.stroke();}

// 圆形，曲线arc(x, y, radius, startAngle, endAngle, counterclockwise);

<style>// 画布背景颜色#canvas {    background: #000;}</style>// 画布宽度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 开始 context.beginPath(); // 绘制圆形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 关闭 context.closePath(); // 填充颜色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>

// 设置画布宽度var cx = canvas.width = 400;var cy = canvas.height = 400;

// 获取这个canvas的上下文对象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');

// 辅助线绘制弧线arcTo(x1, y1, x2, y2, radius)

// 绘制一条弧线function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // 开始绘制    context.beginPath();    // 移动点    context.moveTo(80, 120);    // 绘制线条    context.lineTo(150, 60);    context.lineTo(180, 130);    // 描边    context.strokeStyle="rgba(0,0,0,0.4)";    context.lineWidth=2;    context.stroke();    context.beginPath();    context.moveTo(80,120);    context.arcTo(150,60,180,130,50);    context.strolkeStyle="rgba(255,135,0,1)";    context.stroke();}

quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制点的坐标，x, y描述了曲线的终点坐标

bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一个控制点的坐标 // cp2X, cp2Y 表示第二个控制点的坐标 // x, y表示曲线的终点坐标

function draw() {    // 绘制曲线    var canvas = document..getElementById('canvas');    var context = canvas.getContext('2d');    // 开始绘制    context.beginPath();    // 移动    context.moveTo(100,180);    // 连线    context.lineTo(110,80);    context.moveTo(260,100);    context.lineTo(300,200);    // 描边    context.strokeStyle="rgba(0,0,0,0.4)";    // 设置宽度    context.lineWidth=3;    context.stroke();    context.beginPath();    context.moveTo(100,180);    // 绘制贝济埃曲线    context.bezierCurveTo(110,80,260,100,300,200);    // 设置宽度    context.lineWidth = 3;    context.strokeStyle="rgba(255,135,0,1)";    context.stroke();}

var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 画布宽度200var canX = canvas.width = 200var canY = canvas.height = 200;// 开始绘制context.beginPath();// 四分之一圆context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();
context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();

gradient.addColorStop(stop,color)

function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // image实例    var newImg = new Image();    newImg.src='../images/dada.jpg' // 指定图像的文件地址    newImg.onload = function(){        // 绘图        context.drawImage(newImg, 0, 0);        context.drawImage(newImg, 250,100, 150,200);        context.drawImage(newImg, 90,80,100,100,0,0,120,120);    }}

// 创建线性渐变createLinearGradient()方法
// 创建径向渐变createRadialGradient()方法

addColorStop(offset, color);

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 创建渐变对象，线性渐变    var grd = context.createLinearGradient(0,0,300,0)    // 设置渐变颜色    grd.addColorStop(0, '#xxx'); // 设置颜色    grd.addColorStop(1, '#xxx'); // 设置颜色    // 将填充样式设置为线性渐变对象    context.fillStyle = grd;    context.fillRect(0,0,300,80);}

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 径向渐变    var grd = context.createRadialGradient(50,50,0,100,100,90);    // 设置渐变颜色以及方式    grd.addColorStop(0,'#xxx');    grd.addColorStop(1,'#xxx');    context.fillStyle = grd;    context.beginPath();    // 圆形    context.arc(100,100,90,0,Math.PI*2,true);    context.fill();}

butt// 定义了线段没有线帽round// 定义了线段的末端为一个半圆形的线帽square// 定义了线段的末端为一个矩形的线帽

lineJoin = [value];
round // 两条线段的外边缘应该和一个填充的弧结合bevel // 两条线段的外边缘应该和一个填充的三角形相交

createPattern(image, repetitionStyle)

function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    var img = new Image();     // 使用Image()构造函数创建图像对象    img.src='../images/xxx'     // 指定图像的文件地址    img.onload = function() {        // 绘图模式        var ptrn = context.createPattern(img, 'repeat');        // 填充样式        context.fillStyle = ptrn;        // 填充矩形        context.fillReat(0,0,500,200);    }}

// 移动translate(dx,dy);// 绘制function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 设置移动偏移量    context.translate(200, 200);    // 绘制一个圆形    ArcFace(context);}// 绘制一个圆形function ArcFace(context) {    // 绘制一个圆形边框    context.beginPath();    // 绘制圆形    context.arc(0,0,90,0,Math.PI*2,true);    // 线宽    context.lineWidth=5;    // 描边    context.strokeStyle='#f90';    context.stroke();    // 绘制    context.beginPath();    context.moveTo(-30, -30);    context.lineTo(-30, -20);    context.moveTo(30, -30);    context.lineTo(30, -20);    context.moveTo(-20, 30);    // 曲线    context.bezierCurveTo(-20, 44, 20, 30, 30, 20);    context.strokeStyle='#000';    context.lineWidth=10;    context.lineCap = 'round';    // 笑脸😀    context.stroke();}

scale(sx, sy);// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子

// 示例function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContent('2d')    // 移动    context.translate(200,200);    // 缩放    context.scale(0.5,0.5);    ArcFace(context);}

rotate(angle)

// 旋转例子function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d')    context.translate(200,200);    // 旋转    context.rotate(Math.PI/6);    context.scale(0.5, 0.5)    ArcFace(context)}

transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转
1. 移动translate (dx, dy)2. 缩放scale (sx,sy)3. 旋转rotate (A)

// 绘制文本示例function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 填充颜色    context.fillStyle = '#000';    context.font = 'bold 12px impact';    // 绘制文本    context..fillText('达达前端，魔王哪吒', 10, 10);    context.strokeStyle = '#000';    context.font = 'bold italic 12px impact';    // 绘制文本    context.strokeText('jeskson', 10, 10);}

measureText(text)

function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    context.fillStyle='#000';    context.font='bold 10px impact';    // 测量文本的宽度    var tm = context.measureText(txt);    context.fillText(txt,10,10);    context.fillText(tm.width, tm.width+10, 50);    context.strokeStyle = '#000';    context.font = 'bold italic 10px impact';    // 测量文本的宽度    tm = context.measureText(txt);    context.strokeText(txt,10,10);    context.strokeText(tm.width, tm.width+10, 100);}

<template>	<view class="backgroundColor">	    // 画布		<canvas class="isCan" canvas-id="dadaPoster" :style="{ width: cansWh.cansWidth + 'px', height: cansWh.cansHeight + 'px' }"></canvas>		// 效果图		<image class="showImg" mode="aspectFit" v-if="tempImgShow" @longpress="longpress" :src="tempImg"></image>		// 按钮		<view v-if="tempImgShow" class="fixedBox flex flex-direction">			<view class="boxTop text-white">长按图片发送给朋友</view>			<view class="boxDown">				<button class="flexBtn" hover-class="btnHover" @click="closeCans">关闭</button>			</view>		</view>	</view></template>data() {	return {		tempImgShow: false,		tempImg: '',		cansWh: { // 画布宽高			cansWidth: 800,			cansHeight: 900,		},		qrcode: { // 举例二维码			top: 0.85,			left: 0.035,			width: 0.23,			qrHeight: null,		},		...		productImg: { // 产品图			top: 0.1,			left: 0.03,			width: 1,			height: 0.5,		},	};},

// 绘制图drawImg(method,param){	return new Promise((resolve, reject)=>{		if(param.url.indexOf('http') === 0){			uni.downloadFile({				url: param.url,				success(res) {					param.url = res.tempFilePath					method(param).then(res=>{						resolve(res)					}).catch(err=>{						reject(err)					})				},				fail(error) {					console.log(error)				}			})		}else{			method(param).then(res=>{				resolve(res)			}).catch(err=>{				reject(err)			})		}	})}

// 绘制圆形drawCircle(param) {var that = this,x = param.x,y = param.y,r = param.r,url = param.url;return new Promise((resolve, reject) => {	x = Math.ceil(that.cansWh.cansWidth * x);	y = Math.ceil(that.cansWh.cansHeight * y);	r = r > 1 ? r : Math.ceil(that.cansWh.cansWidth * r);	that.ctx.save();	var d = 2 * r;	var cx = x + r;	var cy = y + r;	that.ctx.arc(cx, cy, r, 0, 2 * Math.PI);	that.ctx.clip();	that.ctx.drawImage(url, x, y, d, d);	that.ctx.restore();	that.ctx.draw(true, res=>{		resolve();	});});}

// 绘制图drawPic(item) {return new Promise((resolve, reject) => {	let x, y, w, h, r;	y = item.sTop <= 1 ? this.cansWh.cansHeight * item.sTop : item.sTop;	w = item.sWidth <= 1 ? this.cansWh.cansWidth * item.sWidth : item.sWidth;	h = item.sHeight <= 1 ? this.cansWh.cansHeight * item.sHeight : item.sHeight;	if (item.sLeft == 'center') {		x = item.sWidth <= 1 ? this.cansWh.cansWidth * (0.5 - item.sWidth / 2) : this.cansWh.cansWidth * 0.5 - item.sWidth /			2;	} else {		x = this.cansWh.cansWidth * item.sLeft;	}	if (item.r) {		r = item.r;		this.ctx.save();		if (w < 2 * r) r = w / 2;		if (h < 2 * r) r = h / 2;		this.ctx.beginPath();		this.ctx.moveTo(x + r, y);		this.ctx.arcTo(x + w, y, x + w, y + h, r);		this.ctx.arcTo(x + w, y + h, x, y + h, r);		this.ctx.arcTo(x, y + h, x, y, r);		this.ctx.arcTo(x, y, x + w, y, r);		this.ctx.closePath();		this.ctx.clip();		this.ctx.drawImage(item.url, x, y, w, h);		this.ctx.restore(); // 返回上一状态	} else {		this.ctx.drawImage(item.url, x, y, w, h);	}	this.ctx.draw(true, res=>{		resolve();	});});}

// 保存saveCans() {let tempRatio = 1;uni.canvasToTempFilePath({x: 0,y: 0,width: this.cansWh.cansWidth * tempRatio,height: this.cansWh.cansHeight * tempRatio,destWidth: this.cansWh.cansWidth * tempRatio * 2,destHeight: this.cansWh.cansHeight * tempRatio * 2,canvasId: 'dadaPoster',success: (res) => {	this.tempImg = res.tempFilePath;	setTimeout(() => {		this.tempImgShow = true;	}, 100);	uni.hideLoading();},fail: (res) => {	console.log(res);	uni.hideLoading();}},);}

// canvas标签的使用<canvas width="100" height="100"></canvas>// 获取canvasvar canvas = document.getElementById('target')if(canvas.getContext) {    var ctx = canvas.getContext('2d');}else {    alert('该浏览器版本过低，请更换')}
// 矩形fillRect( x , y , width , height) // 填充strokeRect( x , y , width , height) // 空心clearRect( x, y , width , height ) // 清除透明 var grd = ctx.createLinearGradient( x1 ,y1 ,x2 ,y2); //线性渐变var grd = ctx.createRadialGradient(x1 ,y1 ,r1 ,x2 ,y2 ,r2);//径向渐变

<body>    <img src="img/bg.png" id="img1" style="display: block" width="1200" height="800" />    <img src="img/dada.png" id="img2" style="display: block" width="100" height="100" />    <img id="img3" />    <button onclick="draw()" id="btn">点击下载</button>        <script>        function draw() {            var img1 = document.getElementById("img1"),            var img2 = document.getElementById("img2"),            var img3 = document.getElementById("img3");                        var img1.width = 1200;            var img1.height = 800;            var img2.width = 100;            var img2.height = 100;                        var canvas = document.createElement("canvas"),                context = canvas.getContext("2d");            // 绘制宽度            canvas.width = img1.width;            // 绘制高度            canvas.height = img1.height;             /**             * context.drawImage(image,x,y,w,h)             * var img=new Image(); img.src="url(...)";             * x:绘制图像的x坐标             * y:绘制图像的y坐标             * w:绘制图像的宽度             * h:绘制图像的高度             */                         context.drawImage(img1, 0, 0, img1.width, img1.height);            // 将 img2 加入画布            context.drawImage(img2, 100, 100, img2.width, img2.height);            // 文字填充颜色            context.fillStyle = '#333';            // 文字字体            context.font = 'bold 45px 黑体';            // 设置文字            var name_text = '达达前端，魔王哪吒';            // 获取文字的宽度            var name_width = context.measureText(name_text).width;            // 获取除去文本后的一半的宽度            var x = (canvas.width - name_width) / 2;                        /**             * context.font:设置字体样式             * context.textAlign:水平对齐方式             * context.textBaseline:垂直对齐方式             * context.measureText(text):计算字体长度(px)             */            context.fillText(name_text, x, 450);            context.fillStyle = '#333'; // 文字填充颜色            context.font = '25px bold 黑体';            var con_1 = 'dadaqianduan';            var con_2 = '达达';            /**             * text:要绘制的文字             * x:文字起点的x坐标轴             * y:文字起点的y坐标轴             */            context.fillText(con_1, x, 400);            var con_width_2 = context.measureText(con_2).width;            context.fillText(con_2, canvas.width - x - con_width_2, 400);            context.stroke();            // 将画布内容导出            var src = canvas.toDataURL();            img3.src = src;            const a = document.createElement("a");            a.href = src;            a.download = '自定义.png';            a.click();        }    </script></body>

script引入文件
html2canvas(content, { //content是将要截图的div元素    scale: 2,    logging: false,  //在console中输出信息    useCORS: true  //允许跨域    //proxy: string,   //代理地址    //timeout: number   //超时时间}).then(function(canvas) {    let dataUrl = canvas.toDataURL()    console.log(dataUrl)})

<script>var code_model = '<div id="qrcode" style="position: fixed; opacity: 0;"></div>', // 放置二维码    canvas_model = '<canvas width="1200" height="800" style="position: fixed;opacity:0;" id="myCanvas"></canvas>', // 放置canvas    poster_model = '<div class="poster_container"><div class="poster"><img src="" alt="" class="poster_img"><p class="save_poster">长按保存图片至手机相册</p><p style="margin-top: 0.5rem" class="aaaa"></p></div></div>';    //poster_model为效果图$("body").append(code_model, canvas_model, poster_model);$.ajax({    url: "/photo/dada",    data: {        id: id    },    success: function (res) {        $.hideLoading();        if (res.e = "1111") {            if (!res.data.is_buy) {                location.href = res.data.jump_url;                return false;            }            $(".poster").show();                        var data_base = res.data.poster_info;            new QRCode('qrcode', {                text: data_base.url,                width: 100,                height: 100,                colorDark: '#000000',                colorLight: '#ffffff',                correctLevel: QRCode.CorrectLevel.H            });            var c = document.getElementById("myCanvas"),             cxt = c.getContext("2d");            var img = new Image(), imgUrl, personName = data_base.name;            //跨域问题            img.crossOrigin = 'anonymous';            img.src = data_base.image;            img.onload = function () {                //图片加载为异步加载                cxt.drawImage(img, 0, 0);                cxt.save();                cxt.beginPath();                cxt.arc(100, 200, 33, 0, 2 * Math.PI, true);                cxt.strokeStyle = '#fff';                cxt.stroke();                cxt.clip();                var img_head = new Image();                img_head.crossOrigin = 'anonymous';                var avatar_height = data_base.avatar_height, avatar_width = data_base.avatar_width;                img_head.src = data_base.avatar;                img_head.onload = function () {                    cxt.drawImage(img_head, 0, 0, avatar_height, avatar_width, 54, 520, 80, 80);                    cxt.restore();                    var img_code = new Image();                    img_code.crossOrigin = 'anonymous';                    cxt.lineWidth = "4";                    cxt.strokeStyle = '#FFF';                    cxt.rect(80, 80, 400, 400);                    cxt.stroke();                    setTimeout(function () {                        img_code.src = $("#qrcode").find("img").attr("src");                        img_code.onload = function () {                            cxt.drawImage(img_code, 0, 0, 100, 100, 450, 450, 80, 80);                            cxt.font = '21px 黑体';                            cxt.fillStyle = "#000";                            cxt.fillText(personName, 250, 520);                            imgUrl = c.toDataURL("image/png", 1);                            $(".poster_img").attr("src", imgUrl);                            $(".poster_container").show();                        };                    }, 0);                };            };        } else {            $.toast(res.m, "text");        }    }});</script>

<view class="photoCan">  <canvas style="width: 375px; height: 612px; position:fixed; top:9999px; left:0; z-index:223;" canvas-id="mycanvas"></canvas>  <image src="{{imagePath}}" mode="widthFix"></image></view>

const app = getApp()const setText = (context, fs, color, x, y, c) => {  context.setFontSize(fs);  context.setFillStyle(color);  context.setTextAlign('left');  context.fillText(c, x, y);  context.restore();};
Page({  data: {    imagePath:''  },  onLoad(){    var that=this;    wx.downloadFile({       url: 'https://xxxx.com/image',       success: function (res) {           that.setData({              path: res.tempFilePath           })        }     })    var ctx = wx.createCanvasContext('mycanvas');    var c_avatar = '../image/timg2.jpg';    var wechat = '../image/wechat.png';    var path = that.data.path;    ctx.fillStyle = "#ffe200";    ctx.fillRect(0, 0, 375, 612);    setText(ctx, 16, '#xxx', 90, 45, '达达);    // 绘制画报背景图    ctx.drawImage(path, 30, 95, 400, 500);    //头像    ctx.arc(45, 45, 25, 0, 2 * Math.PI)    ctx.strokeStyle = "#fff";    ctx.clip();    ctx.drawImage(c_avatar, 20, 20, 50, 50);    // 绘制生成画报    ctx.draw(true, setTimeout(function () {      // 保存      wx.canvasToTempFilePath({        canvasId: 'mycanvas',        success: function (res) {          console.log(res)          var tempFilePath = res.tempFilePath;          that.setData({            imagePath: tempFilePath          });        },        fail: function (res) {          console.log(res);        }      })    }, 1000));  }})