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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
微信小程序如何获取用户手机号
2018/01/26 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python同时遍历两个list用法说明
2020/05/02 Python
质检部部长职责
2013/12/16 职场文书
公司培训欢迎词
2014/01/10 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
中式结婚主持词
2014/03/14 职场文书
平安建设实施方案
2014/03/19 职场文书
优质服务活动实施方案
2014/05/02 职场文书
小学社团活动总结
2014/06/27 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
违纪检讨书
2015/01/27 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
python opencv旋转图片的使用方法
2021/06/04 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技