canvas 鼠标移动画矩形,如何使用canvas绘制一个矩形

　　这篇文章主要介绍了某视频剪辑软件使用鼠标在帆布上绘制矩形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件使用鼠标在帆布上绘制矩形的具体代码，供大家参考，具体内容如下

　　1.代码

　　模板

　　div class= test style= background-color:burlywood；

　　画布id=myCanvas ref=myCanvas

　　width= 460 height= 240 @ mousedown= mousedown @ mouseup= mouseup @ mousemove= mousemove

　　/画布

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称："你好，世界",

　　data() {

　　返回{

　　标志：假，

　　x: 0，

　　y: 0

　　};

　　},

　　观察：{},

　　已计算：{},

　　方法：{

　　鼠标按下(e){

　　console.log(鼠标落下);

　　this.flag=true

　　这个。x=e . offsetx//鼠标落下时的X

　　这个。y=e . off sety//鼠标落下时的Y

　　},

　　鼠标抬起(e){

　　console.log(鼠标抬起);

　　this.flag=false

　　},

　　鼠标移动(e){

　　console.log(鼠标移动);

　　这个。画rect(e)；

　　},

　　drawRect(e){

　　if(this.flag){

　　console.log(绘制图形);

　　常量画布=this .$参考文献。我的画布；

　　var CTX=画布。获取上下文(“2d”)；

　　设x=这个. x

　　设y=这个. y

　　ctx.clearRect(0，0，canvas.width，canvas。身高)；

　　CTX。begin path()；

　　//设置线条颜色，必须放在绘制之前

　　CTX。笔画样式= # 00ff 00

　　//线宽设置，必须放在绘制之前

　　CTX。线宽=1；

　　ctx.strokeRect(x，y，e.offsetX-x，e . offset y)；

　　}

　　}

　　},

　　已创建(){

　　},

　　已安装(){

　　}

　　};

　　/脚本

　　样式范围

　　#我的画布{

　　背景色：森林绿；

　　背景图像：url(./BG。jpg’)；

　　}

　　/风格

　　2.运行截图

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。