画一个简单的图片
initCanvas() {
// 获取canvas
let canvas = document.getElementById("myCanvas");
let w = "750";
let h = "1334";
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
let res = `https://zk-static-1301841918.cos.ap-nanjing.myqcloud.com/mbtl/r/${this.result_1}${this.result_2}${this.result_3}${this.result_4}.jpg`;
let img = document.createElement("img");
img.setAttribute("crossOrigin", "anonymous");
img.src = res;
img.onload = () => {
ctx.drawImage(img, 0, 0, w, h);
};
};
},
这样就可以画出一个图片
画布里画一个头像
- 首先要先把图片画出来然后画圆形 其中一些属性里的属性值自己搞的
initCanvas() {
// 获取canvas
let canvas = document.getElementById("myCanvas");
let w = "750";
let h = "1334";
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, w, h);
let avatar = this.avatar;
let ai = document.createElement("img");
ai.src = avatar;
ai.onload = () => {
ctx.save();
ctx.beginPath();
ctx.arc(594, 140, 85, 0, 2 * Math.PI, false);
ctx.clip(); //剪切路径
ctx.drawImage(ai, 0, 0, ai.width, ai.height, 509, 55, 170, 170);
ctx.restore();
};
},
- .arc(594, 140, 85, 0, 2 * Math.PI, false);
官方文档里是这样说的：
CanvasRenderingContext2D.arc()是 Canvas 2D API 绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。 语法：
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
其中，x表示圆弧中心（圆心）的x轴坐标；y表示圆弧中心（圆心）的y轴坐标；radius表示圆弧的半径；startAngle表示圆弧的起始点，x轴方向开始计算，单位以弧度表示；endAngle表示圆弧的终点，单位以弧度表示，anticlockwise表示boolean值，如果为true，逆时针绘制圆弧，反之。 画一个圆形，首先你要先画出正方形，也就是：
ctx.drawImage(ai, 0, 0, ai.width, ai.height, 509, 55, 170, 170);
解释参数：
Canvas 2D API 中的 CanvasRenderingContext2D .drawImage() 方法提供了多种方式在Canvas上绘制图像。
语法：
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
其中，image是你要绘制的图片；sx是image的矩形裁剪选择框的左上角x轴的坐标；sy是image矩形裁剪选择框的左上角y轴坐标；swidth是image的宽度；sHeight是image的高度；dx是image的左上角在目标canvas上x轴坐标；dy是image左上角在目标canvas上y轴坐标；dWidth是在目标canvas上绘制的宽度，允许对绘制的image进行缩放；dHeight是在目标canvas上绘制的高度，允许对绘制的image进行缩放 然后根据画出的正方形进行裁剪：
ctx.save();
ctx.beginPath();
ctx.arc(594, 140, 85, 0, 2 * Math.PI, false);
ctx.clip(); //剪切路径
ctx.restore();
如果实在搞不懂arc里面参数坐标，可以看drawImage里的参数：x=dx+dWidth/2，y=dy+dHeight/2，radius=dWidth/2
用canvas来解决图片跨域问题的话，就必须加这个属性
img.setAttribute("crossOrigin", "anonymous");
官方解释： 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。 要获取某个属性当前的值，可使用 getAttribute()；要删除某个属性，可使用 removeAttribute()。 语法：
element.setAttribute(name, value);
举例： 绘制一张图片，图片里有头像，用户名
initCanvas() {
// 获取canvas
let canvas = document.getElementById("myCanvas");
let w = "750";
let h = "1334";
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
let res = `https://zk-static-1301841918.cos.ap-nanjing.myqcloud.com/mbtl/r/${this.result_1}${this.result_2}${this.result_3}${this.result_4}.jpg`;
let img = document.createElement("img");
img.setAttribute("crossOrigin", "anonymous");
img.src = res;
img.onload = () => {
ctx.drawImage(img, 0, 0, w, h);
let avatar = this.avatar;
let ai = document.createElement("img");
ai.setAttribute("crossOrigin", "anonymous");
ai.src = avatar;
ai.onload = () => {
ctx.save();
ctx.beginPath();
ctx.arc(594, 140, 85, 0, 2 * Math.PI, false);
ctx.clip(); //剪切路径
ctx.drawImage(ai, 0, 0, ai.width, ai.height, 509, 55, 170, 170);
ctx.restore();
ctx.font = "43px Georgia";
ctx.fillStyle = "#ffffff";
ctx.fillText(this.name?this.name:'', 270, 163,230);
this.ImgUrl = canvas.toDataURL();
console.log(this.ImgUrl);
};
};
},
