使用canvas可以做到许多意想不到的功能，尤其动画方面，这次在vue项目中使用canvas制作一个简易涂鸦板
1. html部分代码
<template><div id="app-box"><!-- 画布 --><canvas id="canvas-box" ref="box"></canvas><!-- 功能 --><div class="input-line"><div class="color-select"><input type="color" id="color-box" @change="selectColor" ref="colorBox" v-model="colorValue"><label for="color-box">选择画笔颜色</label></div><div class="number-select"><input type="number"id="number-box"v-model="numberValue"min="1"max="8"@change="selectNumber"><label for="number-box">选择画笔粗细</label></div><button @click="clearCanvas">清空屏幕</button></div></div></template>上面主要由一个画布区域和下面的操作栏按钮实现
2.css部分代码
<style>.input-line{width: 500px;display: flex;justify-content: space-between;margin-top: 10px;}.color-select,.number-select{width: 200px;}#number-box{width: 50px;}</style>画布的大小是由canvas控制的，这里设置的是下面按钮的排列
3.JS部分代码
<script>export default {name:'App',data() {return {colorValue:'#000000',numberValue:1}},methods: {//清空画布clearCanvas(){this.$refs.box.getContext('2d').clearRect(0, 0, 500, 500);console.log('清空');},//设置画笔颜色selectColor(){this.$refs.box.getContext('2d').strokeStyle = this.colorValueconsole.log('选择颜色',this.colorValue);},//设置画笔的粗细selectNumber(){this.$refs.box.getContext('2d').lineWidth = this.numberValueconsole.log('选择粗细',this.numberValue);}},mounted() {//获取画布对象let box = this.$refs.box//准备画笔let boxText = box.getContext('2d');//设置画布大小box.width = 500box.height = 500box.style.border = "1px solid #000";//设置画笔颜色boxText.strokeStyle = this.$refs.colorBox.value//设置画布事件box.onmousedown = (e)=>{let x = e.clientX - box.getBoundingClientRect().left;let y = e.clientY - box.getBoundingClientRect().top;boxText.beginPath();//开始规划路径boxText.moveTo(x, y);//移动起始点//当鼠标移动触发onmousemove事件时,定义一个函数获取绘制线条的坐标box.onmousemove = (event)=> {let x = event.clientX- box.getBoundingClientRect().left;let y = event.clientY- box.getBoundingClientRect().top;boxText.lineTo(x, y);//绘制线条boxText.stroke();//绘制描边};//当鼠标按键被松开时，onmousemovet函数返回nullbox.onmouseup = ()=> {box.onmousemove = null;};}},}</script>文章来自于Canvas网页涂鸦板再次增强版 - 腾讯云开发者社区-腾讯云
