Vue使用鼠標(biāo)在Canvas上繪制矩形

更新時(shí)間：2020年12月24日 09:58:27 作者：小諸葛的博客

這篇文章主要介紹了Vue使用鼠標(biāo)在Canvas上繪制矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue使用鼠標(biāo)在Canvas上繪制矩形的具體代碼，供大家參考，具體內(nèi)容如下

1.代碼

<template>
 <div class="test" style="background-color: burlywood;">
 <canvas id="myCanvas" ref="myCanvas"
   width="460" height="240" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">
 </canvas>
 </div>
</template>
 
<script>
 export default {
 name:"hello-world",
 data() {
  return {
  flag: false,
  x: 0,
  y: 0
  };
 },
 watch: {},
 computed: {},
 methods: {
  mousedown(e){
  console.log("鼠標(biāo)落下");
  this.flag = true;
  this.x = e.offsetX; // 鼠標(biāo)落下時(shí)的X
  this.y = e.offsetY; // 鼠標(biāo)落下時(shí)的Y
  },
  mouseup(e){
  console.log("鼠標(biāo)抬起");
  this.flag = false;
  },
  mousemove(e){
  console.log("鼠標(biāo)移動");
  this.drawRect(e);
  },
  drawRect(e){
  if(this.flag){
   console.log("繪制圖形");
   const canvas = this.$refs.myCanvas;
   var ctx = canvas.getContext("2d");
   let x = this.x;
   let y = this.y;
 
   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.beginPath();
 
   //設(shè)置線條顏色，必須放在繪制之前
   ctx.strokeStyle = '#00ff00';
   // 線寬設(shè)置，必須放在繪制之前
   ctx.lineWidth = 1;
 
   ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
  }
  }
 },
 created() {
 
 },
 mounted() {
 
 }
 };
</script>
 
<style scoped>
 #myCanvas{
 background-color: forestgreen;
 background-image:url('../bg.jpg');
 }
</style>

2.運(yùn)行截圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中axios請求網(wǎng)絡(luò)接口封裝的示例代碼
這篇文章主要介紹了vue項(xiàng)目中axios請求網(wǎng)絡(luò)接口封裝的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vue.js每天必學(xué)之組件與組件間的通信
Vue.js每天必學(xué)之組件與組件間的通信,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue中的表單輸入綁定,雙向綁定方式
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
Vue.js集成Word實(shí)現(xiàn)在線編輯功能
在現(xiàn)代Web應(yīng)用中,集成文檔編輯功能變得越來越常見,特別是在協(xié)作環(huán)境中,能夠直接在Web應(yīng)用內(nèi)編輯Word文檔可以極大地提高工作效率,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成Word在線編輯功能,需要的朋友可以參考下
2024-08-08
一文詳解Vue.js生產(chǎn)環(huán)境文件及優(yōu)化策略
隨著 Vue.js 在前端開發(fā)中的普及,如何高效地將 Vue 項(xiàng)目部署到生產(chǎn)環(huán)境成為了開發(fā)者關(guān)注的重點(diǎn),本文將詳細(xì)解析 Vue.js 生產(chǎn)環(huán)境文件的使用方法、優(yōu)缺點(diǎn)以及優(yōu)化策略,需要的朋友可以參考下
2024-12-12
Vue強(qiáng)制組件重新渲染的方法討論
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下
2020-02-02
uni-popup手寫菜鳥上門取件時(shí)間選擇器
這篇文章主要為大家介紹了uni-popup手?jǐn)]了一個(gè)菜鳥上門取件時(shí)間選擇器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件
這篇文章主要介紹了vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件，用vue3實(shí)現(xiàn)一個(gè)可在手機(jī)上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣
2022-09-09
Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之過渡狀態(tài)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Vue項(xiàng)目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)
本次需求是上傳多種固定格式的文件,且回顯的時(shí)候,圖片可以正常顯示,文件可以進(jìn)行下載,主要采用element的el-upload組件實(shí)現(xiàn),對Vue項(xiàng)目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)感興趣的朋友跟隨小編一起看看吧
2023-12-12