Vue使用鼠标在Canvas上绘制矩形


Posted in Vue.js onDecember 24, 2020

本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码,供大家参考,具体内容如下

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("鼠标落下");
  this.flag = true;
  this.x = e.offsetX; // 鼠标落下时的X
  this.y = e.offsetY; // 鼠标落下时的Y
  },
  mouseup(e){
  console.log("鼠标抬起");
  this.flag = false;
  },
  mousemove(e){
  console.log("鼠标移动");
  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();
 
   //设置线条颜色,必须放在绘制之前
   ctx.strokeStyle = '#00ff00';
   // 线宽设置,必须放在绘制之前
   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.运行截图

Vue使用鼠标在Canvas上绘制矩形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue绑定class的三种方法
Dec 24 #Vue.js
全面解析Vue中的$nextTick
Dec 24 #Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 #Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 #Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 #Vue.js
详解Vue的异步更新实现原理
Dec 22 #Vue.js
Vue组件简易模拟实现购物车
Dec 21 #Vue.js
You might like
PHP校验ISBN码的函数代码
2011/01/17 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python构建自定义回调函数详解
2017/06/20 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
儿童编程python入门
2018/05/08 Python
python自动发送邮件脚本
2018/06/20 Python
使用Python处理BAM的方法
2018/09/28 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python如何对齐字符串
2020/07/30 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
大学活动总结模板
2014/07/10 职场文书
出国留学自荐信模板
2015/03/06 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
python微信智能AI机器人实现多种支付方式
2022/04/12 Python