场景

Rock刚从面试现场回来，面试官就问了句能画个小姐姐不，随后好看的身材就消失在办公室。。。。 还没反应过来的Rock想说 what 草率了没要个微信

实现过程

基底要素

画人画骨，画小姐姐我得有长图，可惜微信都没有，长叹-天生我材已无用；

于是乎决定先把画板搞定，再想想怎么画

需求：

• 画布-尽显你的容颜
• 画笔-优美的身材
• 颜色-樱桃xxx
• 橡皮-美的不允许有瑕疵
• 清除-这绝对是失误
• 保存-挥之不去的xxxx

<template>
    <view>
        <canvas 
            @touchstart="touchstartHandler" 
            @touchend="touchendHandler" 
            @touchcancel="touchcancelHandler"
            @touchmove="touchmoveHandler" 
            canvas-id="painter" 
            style="width: 100vw;
            height: 100vw;"
        ></canvas>
	<slider 
            v-model="pointSize"
            @change="sliderChange" 
            step="1" 
            show-value 
            min="1" 
            max="10" 
            activeColor="#FFCC33"
            backgroundColor="#000000" 
            block-color="#8A6DE9" 
            block-size="20" 
          />
	<uni-icons 
            v-for="item,index in colors" 
            :key="index" 
            type="star-filled" 
            size="30"
            @click="() => onChangeColor(item)" 
            :color="pointColor === item ? pointColor : chooseColors[index]"
            style="margin-right: 20vw;"></uni-icons>
	<view style="display: flex;">
            <button @click="onPostCanvas" style="color: dodgerblue;">提交</button>
            <button @click="onClearCanvas" style="color: red;">清除</button>
            <button @click="onCancelCanvas" style="color: lightgray;">橡皮</button>
	</view>
    </view>
</template>

一顿叮铃咣当，完美的元素就冲出了页面，迫不及待的想要拥有权利，那就赋予你们基础的能力好了

data() {
    return {
        pointSize: 5,  //画笔大小
        colors: ["#18bc37", "#f3a73f", "#e43d33", "#8f939c"], //可选颜色
        chooseColors: ["#8cde9b", "#f9d39f", "#f29e99", "#c7c9ce"], //给icon的默认底色
        pointColor: "#18bc37", //当前画笔的颜色
        cancel: false //是否点击了橡皮
    }
}

优美轨迹

NO 基础能力是动不起来的；完美的身材需要灵活的手指；准备好就开始动起来，让其随指而动；

touchstartHandler(e) {
    const touchPoint = e.changedTouches[0] //控制单点
    const context = uni.createCanvasContext('painter') //创建上下文
    context.fillStyle = this.pointColor //填充的颜色
    context.arc(touchPoint.x, touchPoint.y, this.pointSize, 0, Math.PI * 2) //画弧度
    context.fill() //对路径填充颜色
    context.draw(true) //绘制到canvas中
},
touchmoveHandler(e) {
    const touchPoint = e.changedTouches[0]
    const context = uni.createCanvasContext('painter')
    context.fillStyle = this.pointColor
    if (this.cancel) { //橡皮擦的运动过程
        context.save() //保存当前的 canvas上下文
	context.clearRect(touchPoint.x, touchPoint.y, this.pointSize, this.pointSize) //清除画布该矩形区域内容
	context.draw(true)
	context.restore() //恢复到保存的上下文
    } else {
	context.arc(touchPoint.x, touchPoint.y, this.pointSize, 0, Math.PI * 2)
	context.fill()
	context.draw(true)
    }
}

一键清除

哈哈，这就是个完美的错误，得让这个图消失掉；

onClearCanvas() {
    const context = uni.createCanvasContext('painter')
    const sys = uni.getSystemInfoSync()
    context.clearRect(0, 0, sys.screenWidth, sys.screenHeight)
    context.draw(true)
}

画笔能力

一种颜色太单一，强大的画笔必须七十二变，变颜色，变大小，变变变，我预判不了你的变

onCancelCanvas() {
    this.cancel = true
    this.pointColor = "#ffffff"
},
onChangeColor(color) {
    this.pointColor = color
    this.cancel = false
},
sliderChange(e) {
    this.pointSize = e.detail.value
},

收藏

这会儿已经画了啥就不说了，当你画出了心中的美女收藏到哪我也无法知道，所以位置交给你自己

onPostCanvas() {
    uni.canvasToTempFilePath({
        canvasId: "painter",
        success: (res) => {
        }
    })
}

总结

canvas更多的使用方法就得去瞄文档

首次使用uniapp，先画到了这，至于小姐姐的问题，就交给大家去拓展；

挥之不去的姐姐已经魔怔了