所使用到的知识点:
第一:canvas绘制矩形
第二:canvas画图
第三:canvas矩形填色,清除canvas
第四;canvas线性渐变
第五:Uint8ClampedArray---https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray#%E8%AF%AD%E6%B3%95
const alphaPhoto = new Image();
//原始的
alphaPhoto.src = `data:image/jpeg;base64,${res.alphy}`; //阿尔法蒙黑白照
console.log('图片加载完成', this.width, this.height)
//原始的
alphaPhoto.onload = () => {
gradientCtx.drawImage(alphaPhoto, 0, 0, this.width, this.height);
this.alphaImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height);
console.log(`alphaImgData加载完成`)
const originPhoto = new Image();
originPhoto.src = `data:image/jpeg;base64,${res.src}`; //抠出的原图头像
originPhoto.onload = () => {
gradientCtx.drawImage(originPhoto, 0, 0, this.width, this.height);
this.originImgData1 = gradientCtx.getImageData(0, 0, this.width, this.height); //原图的data
console.log(`originPhoto加载成功`);
//给抠出的图片加上背景
this.changeGradient(gradientCtx, item.first, item.second)
}
originPhoto.onerror = () => {
this.load = false;
console.log('originPhoto加载失败');
}
}
alphaPhoto.onerror = () => {
this.load = false;
console.log('alphaPhoto加载失败');
}
canvas 的颜色支持各种 CSS 色彩值。
// 以下值均为 '红色'
ctx.fillStyle = 'red' //色彩名称
ctx.fillStyle = '#ff0000' //十六进制色值
ctx.fillStyle = 'rgb(255,0,0)' //rgb色值
ctx.fillStyle = 'rgba(255,0,0,1)' //rgba色值
一:
渐变色
除了使用纯色,还支持使用渐变色。先创建渐变色对象,并将渐变色对象作为样式进行绘图,就能绘制出渐变色的图形。
渐变色对象可以使用 createLinearGradient
创建线性渐变,然后使用 addColorStop
上色。
这里要注意的是,渐变色对象的坐标尺寸都是相对画布的。应用了渐变色的图形实际起到的是类似“蒙版”的效果。
//填充绘制一个矩形,填充颜色为深红到深蓝的线性渐变色
const linGrad1 = ctx.createLinearGradient(0, 0, 300, 300)
linGrad1.addColorStop(0, 'rgb(200, 0, 0)')
linGrad1.addColorStop(1, 'rgb(0, 0, 200)')
ctx.fillStyle = linGrad1
ctx.fillRect(20, 20, 200, 200)
<template>
<div class="doc-page">
<div class="content">
<canvas class="new-canvas" id="new-canvas"></canvas>
<image src="../Common/imgs/beauty.jpg" style=" 500px; height: 600px;"></image>
</div>
</div>
</template>
<style>
.content {
flex-direction: column;
align-items: center;
}
.new-canvas {
width: 500px;
height: 600px;
background-color: blue;
}
</style>
<script>
export default {
private: {
drawComplete: false
},
onInit() {
this.$page.setTitleBar({
text: 'canvas简单绘制'
})
},
onShow() {
if (!this.drawComplete) {
this.drawCanvas()
}
},
drawCanvas() {
const canvas = this.$element('new-canvas') //获取 canvas 组件
const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文
const img = new Image() //新建图像对象
img.src = '../Common/imgs/beauty.jpg' //加载本地图片
//加载成功的回调
img.onload = () => {
// 将图片原封不动的绘制在画布上,是最基本的绘制方法
ctx.drawImage(img, 0, 0)
console.log('图片加载完成')
}
//加载失败的回调
img.onerror = () => {
console.log('图片加载失败')
}
this.drawComplete = true
}
}
</script>